Onlarla youtube videolarına baxdıqdan, mövzuya dair çoxlu məqalələr oxuduqdan, front end proqramçısı olan dostunuzu dinlədikdən sonra heç nə başa düşməmisinizsə, onda bu məqalə məhz sizin üçündür. Bu məqalədə siz veb saytlar və mobil proqram tətbiqləri yaratmaq üçün 2023-ci ildə nəyi öyrənməli olduğunuzu biləcəksiniz. Eyni zamanda, bilik və bacarığıızdan xəbər tutun, inkişaf vektorunuzla necə irəliləyəcəyinizi anlayın və yalnız zəruri olanın öyrənilməsinə vaxt ayırın.
Hələ də front end tərtibatçısının kim olduğunu bilmirsinizsə, diqqətlə mətni oxuyun.
Hələ yorulmamısınızki? Kod vasitəsilə gözəl saytlar yığmaqla digərlərinin illik məvacibini bir ayda almaq istəyirsinizmi? Onda başlayaq!
HTML və CSS: front end tərtibatçısı olmaq üçün nədən başlamaq lazımdır?
İstənilən veb sayt və ya mobil proqram tətbiqi mətnlər, şəkillər, düymələr və digər elementlərdən ibarətdir. Onlar kontentin və ya digər elementlərin harada olduğunu ayırd etməyə kömək edir. Biz bu elementləri dizaynda görürük.
Hər bir şəkil və ya mətn tərtibatçı üçün bir simvol dəstidir. O bunu fərqli şəkildə görür. Məsələn:
İstifadəçi üçün bu sadəcə bir mətndir (yazıdır). Front end tərtibatçısı üçünsə paraqrafa daxil edilmiş bir cümlə. Bu və buna bənzər işarələr içəridəki nə olduğunu nə olduğunu və veb saytda necə yerləşdiyini göstərir. Bütün bunlar HTML və CSS vasitəsilə idarə edilir.
İngilis dilində açılışı "Hyper Text Markup Language" olan HTML, Azərbaycan dilinə "Hipermətn İşarələmə Dili" kimi tərcümə edilən mətn işarələmə dilidir. O, bir koddur. Bu kod vasitəsilə tərtibatçı bloklar, paraqraflar və cədvəllər yaradır, veb sayta banerlər və şəkillər yerləşdirir.
HTML kodlaşdırması vasitəsilə qurulmuş sadə riyazi formul
Saytdaki bütün elementlər bir-birilə ahəngdar şəkildə bağlansın və öz vəzifələrini doğru-düzgün yerinə yetirsin, eləcə də brauzer kodu oxuyub istifadəçiyə düzgün göstərsin deyə tərtibatçı HTML kodlaşmasını bilməlidir.
Təmiz HTML-də biz blok yaradırıq, CSS-də isə ona müxtəliflik və bəzək-düzək əlavə edirik. Məsələn, ona forma və ya rəng veririk. Aşağıdakı şəkildə siz CSS-in saytı istifadəçiyə necə təqdim etdiyinə dair misal görürsünüz.
CSS vasitəsilə mətnin rəng parametrlərinin dəyişdirilməsi
Front end tərtibatçısının işi dizayner tərəfindən hazırlanmış maketi (saytın təsvirini) proqram tətbiqinə və ya veb sayta köçürməkdir. Formaları və rəngləri sazlayaraq. Bu proses “tərtibat” (верстка) adlanır. HTML və CSS bilikləri olmadan bunu etmək mümkün deyil.
Növbəti addım Javascript-i öyrənməkdir.
Sayt və ya mobil proqram tətbiqi üçün həm HTML və CSS dizaynı, həm də istifadəçinin müəyyən əməlləri yerinə yetirə bilməsi vacibdir. Məsələn, saatın gedişini izləmək, animasiyalı obyektə tamaşa etmək və s.
Bütün bu əməllər Javascript proqramlaşdırma dili vasitəsilə icra edilir.
Front end tərtibatçısının işində bu əsas bacarıqlardandır. Tərtibatçının vəzifəsi yalnız dizaynı maketdən veb platformasına köçürmək deyil, həm də məhsulu müəyyən əməllərə uyğunlaşdırmaq, yəni maketdəki interaktiv elementləri saytda işə salmaqdır.
Düyməni sıxsanız, ikinci sətrin mətni dəyişəcək. Kodda bunu Javascript vasitəsilə sazlayırlar
Nə üçün bəs CC, Python və s. kimi başqa proqramlaşdırma dillərindən deyil, məhz Javascript-dən istifadə edilir? Bunun cavabı çox sadədir.
Javascript bütün populyar brauzerləri dəstəkləyir. Front end tərtibatçısı Javascript-dən interaktiv yaratmaq üçün istifadə edir, çünki Javascript proqramlaşdırma dili HTML və CSS ilə əlaqəlidir və koddakı parametrləri tənzimləyə bilir.
Proqramlaşdırma dilləri ilə ümumi, Javascript proqramlaşdırma dili ilə isə xüsusi tanış olmalı olacaqsınız, onu öyrənməli olacaqsınız. Javascript həm tərtibatı hələ öyrənənlər, həm də təcrübəli tərtibatçıların asanlıqla anlayacağı bir proqramlaşdırma dilidir.
Daha artıq bilmək istəyirəm: bir və ya bir neçə freymvork üzərində dayanın.
Tutaq ki, siz universitetdə hüquqşünas kimi təhsil alırsınız. Bakalavr diplomu alır və magistr almaq istəyirsiniz. Magistraturada isə müəyyən bir ixtisas seçməlisiniz. Məsələn, mülki hüquq və müqavilələr.
JavaScript-də sxem belədir. Əsas istiqamət saytlar və proqram tətbiqləri yaradacağınız proqramlaşdırma dilidir. Bundan əlavə, müəyyən sahələrdə işləmək üçün nəzərdə tutulmuş köməkçilər, yəni freymvorklar da var.
Freymvorkun özəlliyi ondan ibarətdir ki, o, təmiz bir proqramlaşdırma dili deyil, layihələrdə quraşdırılmaq üçün nəzərdə tutulmuş hazır ssenari (şablon) toplusudur. Onlardan istifadə etmədən də kodlaşdırmaq mümkündür, lakin düzgün seçilmiş mühit işi çox asanlaşdıra bilər.
Hər hansı bir saytı freymvorkda bloklarla yığmaq onu JavaScript-də sıfırdan yazıb ona HTML və CSS parametrlərini əlavə etməkdən daha asan və daha sürətlidir. Lakin əsas proqramlaşdırma dili kimi JavaScript-i bilmədən siz freymvorklardan və hazır şablonlardan istifadə edə bilməyəcəksiniz. Qarışıqlıq yarana bilər: hara daxil ediləcəyi və necə dəyişdiriləcəyi bəlli olmayan simvollar toplusu. Hər bir freymvorkun öz parametrləri və şablonları var. Front end tərtibatçısı aşağıdakıları öyrənə bilər:
- React. Lego şəklində yığıla bilən hazır komponentlər dəsti. Məsələn, sayt üçün bir başlıq (шапка) daxil edib onu müxtəlif cür rəngləyin.
- Angular. Bir səhifəlik saytların və proqram tətbiqlərin tərtib edilməsi üçün nəzərdə tutulur. O, bu mühitdə çox sürətli işləyir.
- Vue.js. Yaradıcı tərtibatçılar üçün əsasdır. Bu freymvork həm də adaptiv dizayn üçün uyğunlaşdırılmışdır (blokları böyük ekrandan mobil qurğulara düzgün köçürmək). Stackoverflock, PlayStation və s. kimi şirkətlər öz istifadəçi interfeysi saytlarında üçün Vue.js-dən istifadə edirlər.
Front end tərtibatçısı bu siyahıdakı freymvorkların əsasların bilməlidir (ən azı). Onların vasitəsilə görülən iş daha sürətli və asan olur. Lakin bu hələ tam siyahı deyil.
IT STEP Kompüter Akademiyasındakı onlayn təlim kurslarında daha sürətli kod yazmanız, daha çox layihələr üzərində işləməniz və yüksək əmək haqqı almanız üçün bacarıqlarınızı artırmanız məqsədilə biz sizi freymvorklardan düzgün istifadə etməyi öyrədirik. Front end tərtibatçısı təlim kursu haqqında ətraflı məlumatla siz link vasitəsilə tanış ola bilərsiniz.
Sınama və sazlama: təhvil verməzdən əvvəl layihəni hərtərəfli yoxlayırıq
Yalnız freymvorku mükəmməl bilən və daim onunla işləyən kəs yaxşı tərtibatçı sayılmır. Yaxşı tərtibatçı məhsulu müstəqil surətdə sınaqdan keçirə bilməlidir. Bu, əsasən filansda aktualdır: müştəri digər mütəxəssisləri işə cəlb etmədən layihənin sonunadək müstəqil surətdə işləyə bilən tərtibatçıya çox əmək haqqı verir. Şirkətlərdə də oxşar vəziyyətdir.
Layihəni ümumi istifadəyə buraxmazdan əvvəl, yəni təhvil verməzdən əvvəl onu yoxlamaq lazımdır. Məsələn, internet mağazada sifariş düyməsinin işləməməsi front end tərtibatçısı tərəfindən yazılmış kodda səhvin olmasını bildirir.
Müştəriyə natamam layihə təqdim etməmək üçün tərtibatçı sınama və sazlama (debugging) prosesini aparır.
Sınama və sazlama oxşar anlayışlardır. Lakin sınama zamanı siz bütün ssenaridən keçirsiniz (sayta daxil oldum, baxdım, düymələri vurdum, sifariş verdim), sazlama zamanı isə yalnız səhvlər axtarırsınız və onları düzəldirsiniz.
Deməli, front end developer öz işini yalnız yazmır, onu həm də yoxlayır. Əsasən də komandada bu vəzifəni icra edən sınaqçı adlı ayrıca bir mütəxəssis olmadıqda.
İşinizdən müxtəlif brauzerlər vasitəsilə istifadə ediləcək
Əsas odur ki, hazırladığınız layihə həm Google, həm Safari, həm də digər populyar brauzerdə eyni dərəcədə yaxşı işləsin. Layihəni bütün brauzerlərdə işləməsini (krossbrauzer sistemi) təmin etməsəniz, auditoriyanı asanlıqla itirə bilərsiniz.
Nə üçün universal həll yolu yoxdur? Bunun çox sadə səbəbi var. Belə ki, IT şirkətlərinin proqramçıları öz məhsullarını düzəldirlər. Onlar məhz sizin sayt haqqında düşünmür. Ona görə də müəyyən HTML elementləri və CSS xüsusiyyətləri müxtəlif brauzerlərdə müxtəlif şəkildə əks olunur.
Auditoriyanın bir hissəsini itirməmək üçün hər kəsi razı salmaq lazımdır. Buna görə də müştərilər krossbrauzer layihələr sifariş edir
Front end tərtibatçısının məqsədi layihənin bütün platformalarda eyni şəkildə göstərilməsini təmin etməkdir.
Saytları krossbrauzerli hala gətirmək üçün nə etmək lazımdır:
- Əsas brauzerlərdə CSS üslublarının xüsusiyyətlərini bilməli.
- Yazılan kodu bu üslublara uyğunlaşdıra bilməli.
- Layihəni müxtəlif brauzerlərdə sınamalı, səhvləri düzəltməli.
Bu, qeyri-mümkün görünür. Ancaq hər şey o qədər də çətin deyil. Yaxşı müəllimlərin təlimi və praktiki biliklər ilə siz bir ildən sonra bu məqalədə yazılan hər şeyə nail ola bilərsiniz.
Təməl biliklərini aldıqdan sonra front end tərtibatçısı nəyi öyrənməlidir?
Bu bilik və bacarıqlar olmadan inkişaf etmək və nüfuzlu bir iş tapmaq alınmaz. Sadəcə məhsulunuzun dizayner, optimizator və ya rəhbər kimi başqa-başqa insanların dünyasında davranışını bilməyəcəksiniz. Məhsulunuzun reallıqla heç bir əlaqəsi olmayacaq. Çox şey düzəldilməli olacaq, çoxlu vaxt sərf etməli olacaqsınız.
1. Çevik dizayn
HTML və CSS-i mənimsəmisinizsə, deməli, veb dizayner ilə asanlıqla dil tapa və müxtəlif problemlərin həll yollarını tapa biləcəksiniz. Dizaynerə layihə üçün hansı həll yolunun uyğun olduğunu, hansının isə çox vaxt aparacağını söyləmək vacibdir.
Bu tövsiyələr müştərinin layihəyə müəyyən bir büdcə ayırdığı və ondan kənara çıxa bilmədiyi zaman xüsusilə vacibdir. Dizaynerin qərarı isə həlledicidir. Tövsiyə verməklə front end tərtibatçısı dizaynı sadələşdirir, vaxt baxımından çevik bir dizayn yaradır.
Nəticə: müştəri razı qalır və mütəxəssislər layihəni işləmək üçün daha az vaxt sərf edir.
2. Problemləri həll etmək bacarığı
Sizi əvvəlcədən xəbərdar etmək istəyirik: kompüter arxasında uzun müddət oturmağı sevmirsinizsə, proqramlaşdırma sizə uyğun deyil. Tərtibatçının bir nömrəli problemi vaxtın çatışmazlığı problemidir.
Layihə nə qədər mürəkkəb olarsa, onun icrasına bir o qədər çox vaxt sərf olunar. Təcrübə və biliyiniz artdıqca siz layihələrin icrasına daha az vaxt sərf edəcəksiniz. Lakin başlanğıcda yaxşı bir layihə icra etmək üçün siz kompüterin qarşısında uzun müddət oturmalı olacaqsınız.
Tərtibatçının iki nömrəli problemi müştəri ilə ünsiyyət problemidir. Məhsulu müştəriyə təqdim edə bilən bir tərtibatçının nüfuzu artır. Layihə ilə bağlı müştəridə yaranan problemli sualları cavablandırmağı və problemli məsələləri həll edə bilirsinizsə, sizi unutmayacaqlar. Və bir müddətdən sonra Sizə yenidən müraciət edəcəklər, başqalarına tövsiyə edəcəklər və layihələrlə təmin edəcəklər.
Performansın təhlili
Tutaq ki, siz artıq bir sayt yaratmısınız. Məsələn, kommersiya şirkəti üçün blog.
Hər şey yaxşıdır, səhifələr tez yüklənir, müştəri razıdır.
Lakin bir müddətdən sonra saytdakı məqalələrin (səhifələrin) sayı artır, server daha çox yüklənir. Front end tərtibatçısı tərəfindən yazılmış kodun kompüterlər tərəfindən oxunma sürəti azalır. Sayt gec açılır və müştəri öz auditoriyasını itirməyə başlayır.
Məhz bunun üçün tərtibatçı layihələrin performans təhlilinin əsaslarını bilməlidir. Kodu dəyişdirmək, yükləmə elementlərinə düzəliş vermək və ya dizaynı sadələşdirmək üçün.
Təhlili öyrənərkən siz saytların sürətlə açılmasını əngəlləyən skriptlər və digər anlayışlarla tanış olacaqsınız. Səhv yazılmış Javascript kodu və səhv CSS xüsusiyyəti saytların əsas düşmənidir. Onları tapmaq və onlara düzəliş verməyi bacarmaq lazımdır.
Saytın performansının təhlilinə dair misal. Bu işi front end tərtibatçısı görə və buna görə əlavə pul ala bilər.
Bundan əlavə, performans yoxlama xidmətləri ilə işləməyi öyrənin. KeyCDN Speed Test (kodun saytın açılmasına təsirinə baxır), Google PageSpeed Insights və digərləri kimi.
Və ən əsası, problemi öyrənib müştərilərə həll yolları təklif edin. Bundan sonra onlar sizə dəfələrlə müraciət edəcək.
3. Layihənin axtarış sistemlərinə uyğunlaşdırlması
SEO (Search Engine Optimization) – saytın Google kimi axtarış sistemləri üçün optimallaşdırılmasıdır. SEO düzgün aparılmış olduqda istifadəçi onu maraqlandıran sözləri axtarışda yazır və axtardığı veb saytı axtarış nəticələrinin ilk səhifəsində tapır. Axtarılan sayt nə qədər tez tapılarsa və axtarış nəticələrində nə qədər yuxarıda olarsa, deməli, həmin sayt bir o qədər daha yaxşı optimallaşdırılıb.
SEO-da front end tərtibatçısı axtarış robotunun səhifədəki quruluşu və blokları başa düşəcəyi bir sayt hazırlamalıdır. Bundan əlavə, saytın yüklənmə sürətini itirməməsi üçün axtarış robotunun məlumatları daha sürətli emal etməsi də nəzərə alınmalıdır.
Məsələn, tərtibatçı aşağıdakıları icra etməlidir:
- Saytda semantik və strukturlaşdırılmış düzüm. Robotun hər bir HTML kodunu müəyyənləşdirməsi üçün
- Səhifələrdə başlıqların düzgün istifadəsi. Hər səhifədə əsas başlıq hesab olunan tək bir təq mövcud olmalıdır. O, robota səhifənin nə haqda olduğunu bildirir. Robot isə onu hədəf auditoriyasına təqdim edir.
- Şəkillər və cədvəllər üçün kodun yazılması. Robotun yerləşdirilmiş şəkilləri ayırd etməsi üçün.
- HTML kodlarını və CSS xüsusiyyətlərini sıxmaqla sayt performansının optimize edilməsi.
SEO-nu nə qədər yaxşı bilsəniz, layihəni bir o qədər daha həssas icra edərsiniz. Həm müştəri, həm də onun auditoriyası üçün.
4. İstifadəçi təcrübəsi
Front end tərtibatçısı auditoriyanın onun layihəsindən necə keçəcəyinə diqqət yetirməlidir, sifariş düyməsini, abunə formasını və digər elementləri görüb-görməməsini öyrənməlidir. Bütün bunları UX (user experience) həll edir.
Tərtibatçının UX-ə təsirinin gücü çox vaxt şirkətdən asılı olur. Bir yerdə bu təsir güclü, digərində isə zəif olur. Tərtibatçı koda deyil, layihəyə cavabdehdir. Yəni o, layihənin necə inkişaf etdiyinə, dəyişiklik etməyin asan və ya çətin olduğuna, ona nəyinsə əlavə edilməli olub-olmadığına baxır.
Komanda şəklində işləmək, layihəyə dair dizaynerlərə və menecerlərə məsləhət vermək başqaları arasında öz imkanlarını artırmaq, daha çox nüfuz qazanmaq deməkdir. Artıq siz yalnız kodlayıcı deyil, həm də layihə üçün can yandıran və auditoriyanın ehtiyaclarını qarşılayan bir mütəxəssis olursunuz.
Front end tərtibatçısı ilə bağlı vakansiya
Üstəlik, tələb olunan bacarıqlar şirkətdəki işlərdən asılıdır. Yuxarıdakı şəkildə həm front end tərtibatçısı, həm də istifadəçi təcrübəsi biliyi tələb olunur. Bu hal istisna halı deyil. Yaxşı front end tərtibatçısı evik olmalı və IT mütəxəssislərinin əlaqəli işlərini az da olsa, bilməlidir.
Xülasə
Artıq siz tapmacanın tapılmasına doğru xeyli irəliləmisiniz. Artıq siz front end tərtibatçısı kimdir və layihələrin tərtib edilməsi üçün onun hansı bilik və bacarıqlara ehtiyacı var kimi sualların cavabını bilirsiniz. Lakin etiraf edin ki, qarışıqlıq məqamlar az deyil. Hansı kitabları oxumaq lazımdır? Hansı kursa yazılmaq və kimdən məsləhət istəmək lazımdır?
STEP Kompüter IT Akademiyasında biz hər kəsi front end developer vakansiyasında və frilansda tələb olunan hər şeyi öyrədirik. Çalışırıq ki, öyrənmə prosesini yalnız maraqlı deyil, həm də faydalı olsun. Portfolio tərtib etdikdən və məzun olduqdan sonra iş tapmaq problem deyil, reallıqdır.
Front end tərtibatçısı işini öyrənmək və yaxşı bir mütəxəssis olmaq üçün linkə daxil olun.