Koderlər üçün qısa məsləhətlər

Mənim bu yazını yazmağıma əsas səbəb bu yaxınlarda Cavablar.net`də ünvanlanan bir sual oldu. Həmin sualda problemin əsas məğzi tam qeyd olunmadığı üçün qısaca məlumat verdim və düşündüm ki, bu barədə özüm üçün etdiyim qeydləri paylaşmaq işə yaraya bilər. Demək olarki indi etdiyim qeydləri daha səliqəli şəkildə bura yazacam. Yazı uzun alınsa da çalışacam yararlı məlumatlar verim.

Codinglə məşğul olan və ya olmağa qərar verən hərkəsin qarşılaşacağı ilk problem "cross-browser" məsələsi olacaq. Yəni yazdığınız kodun hər brauzerdə başqa cür qəbul olunması olacaq. Ən əsası isə "İnternet Explorer«lə yaşayacağınız problemlər olacaq. Ümumiyyətlə hər brauser html tagların başlanğıc dəyərlərini fərqli qəbul edir. Bunun üçün adətən yazacağınız koda „reset.css“ əlavə etməyi məsləhət görərdim. Bu fayl adətən html taglara bütün brauzerlər üçün eyni dəyəri təyin etməyə yarayır. Bir çox css reset`erlər var. Ən sadəsinə nümunə olaraq bunu misal göstərmək olar. Amma sizin üçün ən ideal variantı siz təcrübə qazandıqca özünüz təyin edəcəksiniz. Məsələn mən „Blueprint CSS“ freamwork əsasənda formalaşdırdığım şəxsi css reseterdən istifadə edirəm. Bu reseterə mən həmdə tez-tez istifadə etdiyim class`ları da əlavə eləmişəm ki, lazım olduqda rahat include olunmuş olsun. Bildiyim qədərilə Yahoo`nun da coderlər üçün yaratdığı „Base CSS“ adlı freamwork də var. Amma ondan istifadə eləməmişəm. Qeyd elədiyim kimi mən öz reseterimi formalaşdırmışam.

Əgər brauzerlərlə olan məsələnin həll olduğunu fikirləşirsinizsə tələsməyin çünki, internetdə bir normal brauzerlər var birdə „İnternet Explorer“ (İE). Adətən İE-nin 6-cı versiyası problem çıxarır. Onun bir çox problemləri var ona görə onu həll eləmək üçün mən xüsusi bir .css fayl yaratmağınızı və ancaq İE6-nın görəcəyi bu kodlarda indivudal yanaşma etməyinizi məsləhət görərdim. Ancaq İE6-nın görə biləcəyi css üçün aşağıdakı koddan istifadə edə bilərsiniz:

<!–[if lte IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie6.css” />
<![endif]–>

Bu kodu <head></head> tagları arasında və əsas css-inizi include etdiyiniz koddan sonra yazmağınız məqsədəuyğundur.

Coding edərkən işinizi sürətləndirəcək və sizə kömək edəcək bəzi tool`lardan da istifadə mümkündür. Mən ümumiyyətlə coding zamanı işçi brauser olaraq Firefox istifadə edirəm. Bunun əsas səbəbi isə Firebug addon`udur. Onun köməkliyi ilə səhifənizdəki dəyişiklikləri onlayn olaraq edə bilər və nəticəsini də görə bilərsiniz. Mənim çox istifadə etdiyim bir addondur. Firbug həmdə CSS Sprites metodunun istifadəsi zamanı çox kömək olur.


Coding prosesini sürətləndirmək üçün bir başqa tool isə „Zen Coding“dir. Editorunuza əlavə edəcəyiniz bu plugin ilə işiniz daha sürətlənəcək. Plugin birçox editorları dəstəkləyir. Mən isə editor seçimində „Adobe Dreamweaver“ seçmişəm. Pluginin öz yazı syntax`isi var. Html üçün sintaksis mənə asan gəldi amma düzü css üçün sintaksisi hələ də öyrənməmişəm, css-ləri ənənəvi qaydada yazıram. Program haqqında fikir yaranması üçün SmashingMagazine`dəki yazını oxuya bilər və ya aşağıdakı demo videoya baxa bilərsiniz.



Sadə coding zamanı o qədər də problem olmasa da, daha mürəkkəb və detallı səhifələri dizayn edərkən bir-birinin daxilində olan div`ləri və elementləri ieararxik olaraq class`lar şəklində yazmaq vaxtımı aparırdı. Bunun üçün class`ları avtomatik olaraq yazacaq bir tool axtarıb tapmışdım. Bu online tooldur. Əvvəlcədən deyim ki, avtomatik olduğuna görə bəzən xətalar yarada bilər, yəni əgər siz bu class`ların ierarxik qanunauyğunluğunu bilmirsinizsə sizə bu vasitə biraz çətin gələ bilər amma ümumiyyətlə kömək edəcək bir alətdir. Yazdığınız html kodu saytdakı textarea yerləşdirirsiniz və avtomatik olaraq həmin kodlara uyğun css class`lar yaradılır, sizə qalır dizaynı reallaşdırmaq. Daha sadə codinglər üçün PrimerCSS`i, daha mürəkkəb codinglər üçün isə CSS frame Generator`u məsləhət görərdim. Amma yenə də deyirəm yaradılmış kodları istifadə etməzdən əvvəl düzgün olub-olmadığını nəzərdən keçirin.


Yadımdan çıxan məqamları isə çalışacam şərhlərdə qeyd edim. Əgər sizdə də hansısa köməkçi tool`lar haqqında məlumat varsa paylaşsanız sevinərdim.

Aid olduğu bloglar

Yazı-Pozu

Kompüter və kompüter proqramları haqqında tutorial xarakterli yazılar, faydalı saytlardan yararlanmaq üçün məsləhətlər.

Oxucuları
7
Başlıqları
16
Reytinq
0.00

10 şərh

Ferhad
Çox faydalı yazıdır. Zen-codingi öyrəndiyim yaxşı oldu :)
Elvin85
+1 Təşəkkür yazıya görə. Şərhlərdə psd to html barədə də məsləhətlər əlavə etsən olar lap əla. :)
Sadig
«psd to html» məsələsi ilə bağlı qeydlərim ondan ibarət ola bilər ki, adətən bəziləri Photoshopdakı «slice tool» vasitəsilə şəkilləri export etməyin daha rahat olduğunu düşünürlər.



Bu alət vasitəsilə dizaynı hissələrə bölüb «Save for Web & Devices» (Ctrl+Shift+Alt+S) ilə şəkilləri export etmək olar:



Amma mən şəkilləri bir-bir export edirəm şəxsən. Çünki məncə maşın coding`i «sənətkar» işinin əvəzin vermir =))
DeviD
FireFox-un 1 böyük çatışmazlığı var Javascript səhvləri göstərmir.Heyf deyil İE6 JS səhvin sətrinə və izahatına kimi yazır.FF-də JS səhvləri göstərən bir vasitə, üsul bilən var? FireBugda da tapa bilməmişəm, JS error olan səhifədən heç bir notice, cavab yoxdu
Amidos
DeviD iE6 bir browser kimi chox kohnedir. Ardiq demek olar ki, ekseriyyet ondan istifade etmir chunki yenilikleri tam desteklemir.

IE-den ferqli olaraq FF-i sen programlashdirma muhiti kimi istifade ede bilersen ve istediyin addonu, plugini ve s. yaza bilersen.

JS errorlara geldikden ise FF-de bu var Tool/Error Console-ni aktiv et achilacaq pencerede sehifede olan butun errorlari gosterecek.

Bu pencere seni qane etmirse FF addon sehifesinde «JS Error viewer» sozunu axtarish ver men eminem ki orada bir neche ferqli error viewerler tapilacaq.

Ugurlar!
DeviD
FireFox-da Error Console bilmirdim.Maraqlı tapıntıdı təşəkkür.İE-də error səhvlər üzdə status barda görsənir deyə aşkar şəkildə səhvi bilmək olur, FF-də isə gizlədiblər nədənsə.Baxmayaraq vebmasterlərin ən çox istifadə etdiyi brauzerdi.
Rashid
Firefox Firebug plugininde javascript errorunu en mukemmel sekilde izah edir. (xml, html, css ve s hemcinin)
Elya
Sadig
Xatırlatmaya görə təşəkkür, freamworklərdən danışanda onu qeyd eləmək yadımdan çıxıb )
Elya
dəyməz :)… məsləhətlərə görədə təşəkkürlər

Yalnız qeydiyyatlı istifadəçilər şərh yaza bilər