markup კოდის პრინციპები

 
                
 1. მარკაპის თანამიმდევრობა
  - დიზაინის მაკეტის შესწავლა და ანალიზი, მნიშვნელოვანი საკითხების ჩამოწერა
  - ფაილების სტრუქტურის მომზადება, კოდის საწყისი სახით გამზადება
  - საიტის გარე HTML სტრუქტურის შექმნა მაკეტის ლოგიკური იერარქიის მიხედვით, ადაპტურობის მიცემა მინიმუმ 360 px ზომაზე, გატესტვა ადაპტივზე და შეცდომებზე
  - საწყისი გვერდისა და უცვლელი ელემენტების მარკაპი 
  - ინტერაქტიული ელემენტების დამუშავება
  - საიტის სხვა გვერდების მარკაპის აწყობა
  - გატესტვა ადაპტივზე, კოდის ვალიდურობაზე და შეცდომებზე

 2. სწორი კოდის პრინციპები
  - ნაკლები კოდი, ნაკლები იერარქია
  - ტეგები ყოველთვის უნდა დაიხუროს 
  - აუცილებელია  
  - CSS ფაილების ლინკები უნდა იყოს ჩასმული Head-ში
  - ჯავასკრიპტის ფაილები უნდა იყოს ბოლოში 
    
  - HTML და CSS კოდმა უნდა გაიაროს ვალიდაცია
  - კოდის ყველა მნიშვნელოვან ფრაგმენტს უნდა ქონდეს კომენტარები
  - კოდის ტეგები ყოველთვის პატარა ასოებით უნდა დაიწეროს.
  - სურათებს აუცილებლად უნდა ქონდეთ ტეგი alt
  - ფუნქციური ელემენტები და a ლინკები ჯობია ჩავსვათ div ჩარჩოში
  - ლოგოს უნდა ქონდეს მთავარი გვერდის ლინკი
  - ყველა ღილაკი უნდა იყოს ერთნაირ სტილში
  - ზომის ერთეული არ უნდა იცვლებოდეს, უმჯობესია პიქსელები
  - არ არის მისაღები ტეგებისა და კლასების ერთად გაწერა CSS-ში 
  - ღილაკები კეთდება 3 საშუალებით: input(ფორმისათვის), button(მოქმედებისათვის), a(სხვა გვერდზე ან გვერდის განყოფილებაზე გადასასვლელად)
  - !important დასაშვებია იყოს მხოლოდ მედია ქუერიებში
  - #ID იდენტიფიკატორები გამოიყენება მხოლოდ HTML-ში
  - inline სტილის გამოყენება დასაშვებია უნიკალურ ელემენტებში, როცა კოდი მცირეა. ასევე იმ ელემენტებში, რომლებიც რაღაცით განსხვავდებიან კლასის სხვა წარმომადგენლებისაგან.
  - ღილაკების დასაშვები მინიმალური ზომა მობილური ვერსიის შემთხვევაში იწყება 34-48 პიქსელიდან
  - ყველა ელემენტს უნდა ქონდეს საკუთარი უსაფრთხო დაშორებები
  - ტექსტურ რედაქტორში html და css მნიშვნელოვანი განყოფილებები უნდა გაერთიანდეს ჯგუფებად
  - ადაპტივის მედია ქუერიები შესაძლებელია გაიწეროს ეკრანების სტანდარტული ზომების პრინციპითაც და ასევე ნებისმიერი ზომების პრინციპითაც, რომლებზეც საიტის დიზაინი მოითხოვს გადაწყობას.

 3. სემანტიკური ტეგები
  - header = მთავარი ზედა კონტეინერი, ზედა მენიუსა და ნავიგაციისათვის
  - main = მთავარი ცენტრალური კონტეინერი, ძირითადი კონტენტისათვის
  - footer = მთავარი ქვედა კონტეინერი, სხვადასხვა ლინკებისა და საჭირო ინფორმაციისათვის
  - aside = მთავარი გვერდითი კონტეინერი, კატაგორიებისა და სხვა ინფორმაციისათვის
  - section = ნახევრად-ავტონომიური კონტეინერი, ბლოკების ან ელემენტების გასაერთიანებლად
  - article = ავტონომიური კონტეინერი, ერთი ინფორმაციული ჯგუფის გამოსახვისათვის
  - nav = კონტეინერი ნავიგაციის ღილაკებისათვის
  - H1-H6 = ტეგები სათაურებისათვის, მნიშვნელობის მიხედვით
  - გვერდის სტრუქტურა იწყობა იერარქიით: მთავარი კონტეინერი-კონტეინერი-ბლოკი-ელემენტები

 4. ტექნიკური საკითხები
  - საიტის ადაპტიური(რესპონსივი) მარკაპის მთავარი მეთოდია Flex ან Grid მეთოდები
  - მარკაპის საწყისი დიდი ეკრანის ზომა არის მინიმუმ Full HD გაფართოება 1920x1080
  - გვერდი უნდა იყოს ადაპტიური ეკრანის ყველა ზომაზე 320px ან 360px მინიმალური ზომით
  - გვერდის კონტენტი სასურველია იყოს მაქსიმუმ 1200px-1600px ზომამდე ჰორიზონტალურად
  - ზომის ადაპტაციური ცვლილება ხდება ელემენტების დრეკადობით(მინიმალურ ზომამდე)+გადაადგილებით
  - ჩატვირთვის სისწრაფე მისაღებ ფარგლებში უნდა იყოს, კომპიუტერის და მობილურის ვარიანტებში
  - სურათების ზომა ოპტიმალური უნდა იყოს, ასევე კოდის და ბიბლიოთეკების ზომებიც
  - კოდის ჩატვირთვა უნდა მოხდეს სწორი მიმდევრობით, ასევე უმჯობესია კოდის კომპრესია.
  - სავალდებულოა კოდის გავლა ვალიდურობაზე
  - საწყისი HTML გვერდი უნდა იყოს ფაილში index.html
  - CSS და JS ფაილები უნდა ინახებოდეს ცალკე
  - სასურველია საიტის ბანერების/სურათის ჩატვირთვა CSS ფაილიდან, რათა მხოლოდ ერთხელ ჩაიტვირთოს
  - სასურველია საიტის ზოგადი ჩარჩოს(მთავარი კონტეინერების) CSS ჩაიწეროს ცალკე ჯგუფად, ან ცალკე ფაილად, ხოლო ბლოკების და ელემენტების CSS კი ცალკე ჯგუფად, ან ცალკე ფაილებად.
  - სურათები უნდა ინახებოდეს fotos, images და icons ფაილებში

 5. უსაფრთხო მარკაპის პრინციპები
  - კოდი უნდა შემოწმდეს ვალიდურობაზე
  - ყველა ბრაუზერში ერთნაირად უნდა ჩანდეს გვერდი
  - ტექსტური არეები უნდა შემოწმდეს ძალიან გრძელ და მოკლე ტექსტებზე 
  - ყველა ბლოკი უნდა შემოწმდეს დიდი და პატარა მოცულობის კონტენტზე 
  - ყველა ბლოკის ადაპტურობა და სწორი განლაგება უნდა შემოწმდეს ყველა ზომის ეკრანზე.  

 6. SEO მოთხოვნები
  - აუცილებელია საიტის ფავიკონი  32x32 PNG საწყის ფოლდერში
  - ყველა გვერდზე უნდა იყოს 1 ცალი H1 ტეგი
  - ყველა სურათს სასურველია ქონდეს alt ტეგში სწორი სახელი SEO გათვალისწინებით
  - გვერდების title ტეგში უნდა გაიწეროს გვერდის მისამართის იერარქია და ბოლოში KEY სიტყვა
  - აუცილებელია საიტის რუკის შედგენა Google ინდექსაციისათვის
  - აუცილებელია robot.txt ფაილი საძიებო ბოტებისათვის 

 7. მარკაპის გატესტვა
  - დიზაინის ვიზუალთან თანხვედრაში შემოწმება
  - სხვადასხვა ბრაუზერებში დიზაინთან შესაბამისობის ტესტირება
  - ბლოკების ტესტირება დიდი და მცირე ზომის კონტენტზე
  - ფორმების ფუნქციონალის შემოწმება
  - ღილაკების, ლინკებისა და აქტიური ელემენტების შემოწმება
  - რესპონსივის გატესტვა ეკრანის მინიმუმიდან მაქსიმალურ ზომებდე
  - SEO ოპტიმიზაციაზე შემოწმება
  - ვალიდაციაზე შემოწმება

 8. საჭირო ლინკები და პროგრამები
  - ვალიდურობაზე HTML შემოწმება https://validator.w3.org
  - ტექსტის რედაქტორები SublimeText  Notepad++  VisualCode

    კლასების სახელდებისა და CSS ფაილის აგების მეთოდოლოგიები
 9. BEM მეთოდოლოგია, მეთოდოლოგია მთლიანად მორგებულია კოდის მრავალჯერადად გამოყენებაზე
  - B = ბლოკი  E = ელემენტი  M = მოდიფიკატორი, კომპონენტური მიდგომის მეთოდოლოგია
  - BEM აგებულია ინტერფეისის ბლოკებად დაყოფაზე, ბლოკზეა დაფუძნებული კლასებისა და ფაილების სისტემაც, ბლოკი არის დამოუკიდებელი და ავტონომიური, შეიძლება გამოყენება მრავალჯერადად 
  - დასაშვებია ბლოკებში ბლოკების ჩასმა, ასევე ელემენტების ელემენტებში
  - ყველა ბლოკს აქვს კლასი, ამ კლასის გავლით ხდება ელემენტებისა და მოდიფიკატორების  სახელების დარქმევა
  - ბლოკის სახელი უნდა აღნიშნავდეს მის შინაარს და დანიშნულებას(menu), და არა მახასიათებელს(red, big).
  - ბლოკის ყველა ელემენტის(მათ შორის ბლოკების) სახელები მთავარი ბლოკის სახელიდან იწარმოება.
  - სახელების გამყოფია ტირე "-", ელემენტის გამყოფი ბლოკისგან ორმაგი ქვედა ტირე "__", მოდიფიკატორის სახელის გამყოფია ერთი ქვედა ტირე "_" ან ორმაგი ტირე "--"
  - სახელების მინიჭების მაგალითი: .card, .card__img, card--dark, card__img--dark
  - რთული მაგალითი: header__red-block_theme--green-forest აქ header ბლოკის სახელია, red-block ელემენტის სახელია, theme მოდიფიკატორია, green-forest მოდიფიკატორის მნიშვნელობაა
  - მოდიფიკატორი აღწერს ბლოკის ან ელემენტის სტილს, მდგომარეობას ან ქცევას.
  - მოდიფიკატორის სახელი იწერება: _სახელი_მნიშვნელობა search-form__button_size_m
  - BEM-ის მიხედვით CSS-ში არ არის ტეგები და ჩასმული სელექტორები, ასევე არ გამოიყენება კომბინირებული სელექტორები, ატრიბუტები და ID იდენტიფიკატორები
  - BEM-ში არის მიქსები, ანუ ორი კლასის მქონე ელემენტები, ერთი კლასია ზოგადი(საერთო), მეორე კი კონკრეტულად ელემენტისთვის. საჭიროა სხვა ბლოკში ჩასმული ბლოკის აღწერისთვის.
  - ფაილურ სტრუქტურაში ბლოკს აქვს თავისი ფოლდერი იგივე სახელით, ფოლდერში მოთავსებულია ყველა საჭირო ტექნოლოგია და ფაილი რაც ბლოკს ჭირდება. ბლოკის მოდიფიკატორები და ოპციები მოთავსებულია ბლოკის ფოლდერის ცალკეულ ფოლდერებში თავისივე დასახელებით.

 10. OOCSS მეთოდოლოგია
  - CSS-ში ცალკე იწერება სტრუქტურის სტილი და ცალკე გაფორმების. HTML-ში ელემენტს ენიჭება 2 კლასი, სტრუქტურის და გაფორმების. class="btn btn-blue">ცისფერი ღილაკი  

 11. Atomic CSS ატომარული მეთოდოლოგია
  - სტილები დაყოფილია, ყოველი ხშირად გამოყენებადი მახასიათებელი ცალკე კლასია
  - კლასის სახელი შედგენილია თვისებებისაგან class = "F1-start W-20px P-20 Bxz-bb"

 12. SMACSS მეთოდოლოგია Base, Layout, Module, State, Theme
  - სტილები იყოფა 5 ნაწილად: საბაზისო, განლაგება, მოდული, მდგომარეობა, თემა. 
  - საბაზისო არის ძირითადი ელემენტების სტილები input, button, ul, body, a, reset.css
  - განლაგების(Layout), ანუ მაკეტის სექციების სტილი header, footer, საზელს შეიძლება დაემატოს l-
  - მოდულების, ანუ განმეორებადი ელემენტების(ბლოკების) სტილები, სახელს შეიძლება დაემატოს m-
  - მდგომარეობის სტილები is-error is-collapsed is-hidden სახელს ემატება is-
  - თემის, ანუ გაფორმების სტილები