spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

František Čaník 16.2.2011
Hodnoť článok:
1 0

Tipy pre moderného web developera: Skicovanie, zrýchlenie JavaScriptu, zrýchlenie CSS

Veľmi inšpiratívny článok pre všetkých web developerov. Množstvo jednoduchých nástrojov, ktoré vám uľahčia a zmodernizujú prácu, zrýchlia váš JavaScript či CSS-ko a rôzne ďalšie veci...

V čase, keď som sa rozhodoval o tom, aký článok by mohol byť prospešný pre Zajtra.sk, som narazil na úvodný tutoriál k jQuery (videocast k jQuery začal vychádzať pred pár dňami - poznámka redakcie). Plánoval som sa tomu venovať, nakoľko sa s ním vo svojej praxi stretávam každý deň, avšak nebudeme snáď riešiť stále všetko dookola a tak to nechám radšej na autorovi, čo sa podujal riešiť tutoriál vo forme videa.

K článku o nerozhodných klientoch bola celkom slušná odozva, ktorá poukázala na mnohé spôsoby, akými sa dá dostať k riešeniam zložitých otázok pri tvorbe nových webov, či ich redesignu.

Spoločne sme sa v diskusii dotkli témy tzv. wireframe-ov či zjednodušenie povedané, skicovania celého funkčného návrhu, čo som nikdy nepovažoval za nepodstatné a úprimne, každý klient si dokáže sám „načmárať“, kde by čo chcel mať a aká je jeho predstava o rozložení jednotlivých prvkov.

Dnes by som sa teda rád pozrel na tému „zdroje moderného developera“, ktorá by mohla pomôcť vývojárom, vedieť sa obrátiť na správny a kvalitný zdroj, plný dobrých nápadov či riešení.

Od nápadu k ceruzke, od ceruzky k Photoshop-u

Keď už som spomínal skicovanie, každý si určite predstavil horu papierov, na ktorých je milión rôznych poznámok, prečo dať navigáciu skôr hore ako doľava, či prečo prihlasovací formulár skrývať do „panelu“ alebo či dávať do dnešných moderných pätičiek stránok kontaktný formulár, alebo radšej mapu od Googlu.

Ak radi „skečujete“, určite Vám pomôže stránka PaperBrowser, na ktorej nájdete PDF šablóny, ktoré si môžete vytlačiť. Či už jednoduchú štruktúru, alebo napodobeninu prehliadača, je to len a len na Vašom výbere. Ak náhodou neviete, ako správne robiť Wireframing, určite Vám pomôžu články kanadskej spoločnosti, ktorá priniesla na trh niekoľko zaujímavých templatov. Prípadne si vyskúšajte rovno online nástroje, akým je napríklad mockup od balsamiq-u.
V prípade, že používate Firefox, môžete si pridať plugin s názvom Pencil a skúste navštíviť prípadne aj wireframes.tumblr.com

Keď už viete, ako bude rozložený obsah, potrebujeme ho oživiť. Pridať mu tie správne „grády“ aby mohol byť web označený za interaktívny, intuitívny a hlavne, aby si o ňom ľudia nemysleli, že je úplne zbytočný a ničím nevyniká.

Modernizujeme a zrýchľujeme

Aj napriek faktu, že sa internet oproti minulým rokom zrýchlil, zostávajú stále zariadenia, ktoré sú populárne, no nemajú šanci fičať si na optike a idú - žiaľ - ešte stále len cez obmedzené 3G siete, v lepších prípadoch cez WiFi.

Zrýchľujeme JavaScript

To je dôvod, prečo sa partička vývojárov zišla a vytvorila projekt s názvom HeadJS, ktorá zrýchľuje načítavanie javascriptov zavolaním jedinej knižnice, ktorá potom určí ďalšie volania. Všetky potrebné informácie nájdete na stránke www.headjs.com.

Veľmi zaujímavým projektom je aj web scriptsrc.net, ktorý ponúka na výber všetky dostupné knižnice, ktoré nám - vývojárom - uľahčujú život. Nájdete tu všetky linky na aktuálne verzie knižníc, rovnako ako aj všetky základné informácie o daných knižniciach a ich použitiu.

Zrýchľujeme CSS

Keď už sme si zrýchlili prácu s JavaScriptom, bodlo by aj niekoľko nástrojov, ktoré nám pomôžu z modernizáciou CSS. Ak často používate zmeny farebných tém či niečo podobné, určite Vám pomôže, ak si zadefinujete všetky používané farby a na tie sa potom odkazujete. Že to CSS nedokáže? Je to z časti pravda, no s projektom lessCSS sa tento „problém“ dá obísť. Podobne funguje aj CSS preprocessor, ktorý dokáže používať pre tvorbu CSS aj regulérne výrazy. Veď ako by sa Vám páčilo, keby ste si mohli v CSS zadefinovať, že margin-left je 50px od polovice?

Zdroje, ktoré určite navštívte

Je možné, že ste sa už s nimi stretli ale ste na ne zabudli, ale určite Vám pomôžu. Či už v rámci inšpirácie, alebo v rámci hľadania riešení.


Ak potrebujete často meniť dátum a čas vo forme MySQL
 - www.mysqlformatdate.com

Hovorí sa, že písmo by nemalo mať pevnú výšku stanovenú v pixeloch, ale má byť v EM. Tu je tabuľka EM hodnôt


Nechce sa Vám inštalovať všetky prehliadače, aby ste zistili, či je Váš web správne zobrazený?
 Tak skúste toto.


Ak sa Vám nechce prehrabávať apache-om, tu si vytvoríte konfiguráciu, podľa Vašich želaní - .htaccess
 editor


Skomprimujte si Vaše CSS
 cez CSS Compressor


Otestujte si všetko, čo si otestovať potrebujete. Či už validitu HTML, CSS, PageRank, či priamo SEO analýzu - cez tester.jonasjohn.de.

Vyresetujte si CSS tak, aby Vaše CSSká boli vždy a všade rovnaké. CSS reset

František Čaník František Čaník

Programátor, webdesigner a webdeveloper niekoľkých webových projektov. Má za sebou prácu v reklamnej agentúre, médiách a na rôznych pozíciách v oblasti IT.


Hodnoť článok:
1 0

10 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 Marcel Klimo (fb) 7.3.2011 00:00:00
@Frantisek Ked uz si spominal CSS Preprocessor, tak by ta mozno zaujimal aj SASS (http://sass-lang.com/) ... teda pokial to nepoznas ;)
0 0 František Čaník (fb) 26.2.2011 00:00:00
@Michal: Nehovorim, ze vzdy treba dodrziavat standardy, ktore su urcovane roznymi smernicami (nielen v statnej sprave), no vzdy je lepsie, ked na to developer mysli, ako ked to vsetko nechava len na nahode. Co sa tyka IE6, trosku sa mylis, pretoze pokial viem, tak aj Firefox ti nezvacsuje font nativne, iba ti robi tzv. zvacsovaciu lupu, takze ta nema s menenim velkosti pisma nic spolocne (ak sa bavime o CTRL + Koliesko na myske, resp. CTRL ++ alebo +-) ...
0 0 Michal Stankoviansky (fb) 24.2.2011 00:00:00
Tak, jednak sa dalo odpovedať aj slušnejšie, a jednak px znemožňujú zväčšovanie písma iba v IE6 a v starších. Takže pokiaľ nerobíš web pre štátnu správu alebo pre cieľovú skupinu slabozrakí/nevidiaci, až tak veľmi by som s tým nestresoval. Vždy záleží od situácie.
0 0 Peter Širka (fb) 22.2.2011 00:00:00
@František Čaník: ďakujem za odpoveď, nevedel som o tom.
0 0 František Čaník (fb) 22.2.2011 00:00:00
@Peter Širka: Optimalizačné štandardy ti niečo hovoria? Napríklad uvádzanie veľkosti písma v pevných PX znemožňuje zväčšovanie a zmenšovanie veľkosti písma, takže štandard pre Blind Friendly je v tom momente porušený.
0 0 Peter Širka (fb) 21.2.2011 00:00:00
Preco font size pisat v em a nie v px? Odjak ziva pisem v px a zatial som s tym nemal problem, alebo mal a nevsimol som si ho?
0 0 Juraj Jupe Petrovic (fb) 20.2.2011 00:00:00
head js urcite raz vyuzijem...
0 0 Juraj Kundrik (fb) 17.2.2011 00:00:00
hmm som ostal v rozpakoch..
ta barlicka, na vytvaranie selectu v Mysql je ozaj neuveritelne
R O Z P A C I T A
0 0 Viktor Čech (fb) 17.2.2011 00:00:00
na slovensku webdeveloperi neexistuju.. ale tvorcovia internetovych stranok
0 0 Michal M Ferák (fb) 16.2.2011 00:00:00
Najviac ma oslovil Head JS, díky za tip!
Zajtra.sk > Programovanie > CSS/HTML > Tipy pre moderného web developera: Skicovanie, zrýchlenie JavaScriptu, zrýchlenie CSS


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama