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

კურსის ავტორი "ადაპტური HTML5 და CSS3" ოლეგ კასიანოვი არის გამოცდილი ვებ დეველოპერი, JoomlaTown.net ინტერნეტ რესურსის დამფუძნებელი, ბლოგერი და დამწყებთათვის და გამოცდილი პროფესიონალებისთვის გაკვეთილების შემქმნელი.

საპასუხო ვებ-გვერდის დიზაინი - ტრენინგი

თითოეულ ვიდეო გაკვეთილს ახლავს ავტორის განმარტებითი კომენტარი. თქვენ გაეცნობით HTML5 და CSS3 ტექნოლოგიების გამოყენების მახასიათებლებს, გააუმჯობესებთ განვითარების უნარებს და ასევე ისწავლით როგორ შექმნათ ადაპტირებული განლაგება.

ოლეგ კასიანოვის ვიდეოკურსი შედგება თეორიული დასაბუთებების, პრაქტიკისა და დამატებითი მასალებისგან. თქვენ მიიღებთ პასუხებს შემდეგ კითხვებზე:

• რა არის ფუნქციონირება HTML5 და CSS3 განლაგებაში;
• რა არის სემანტიკური მარკირება;
• როგორ ვიმუშაოთ სხვადასხვა სახისმედია ობიექტები;
• რა ეტაპებია სადესანტო გვერდების შექმნა;
• რატომ არის მნიშვნელოვანი გვერდის ფორმებისა და ვიზუალიზაციის ტიპების შერევა;
• შექმნის მთავარი სირთულეები მობილური ვერსიასაიტი.

კურსს "Responsive layout on HTML5 and CSS3" ახლავს სამუშაოს შაბლონები, სკრიპტები და cheat sheets კოდით. ოლეგი დიდად უწყობს ხელს სწავლის პროცესს, რის წყალობითაც მართლაც შესაძლებელია რამდენჯერმე სწრაფად დაეუფლოთ HTML5-თან და CSS3-თან მუშაობას.

საპასუხო HTML5 და CSS3

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

HTML5-ისა და CSS3-ის გარეშე შორს ვერ წახვალ

თანამედროვე საიტები და ვებ დეველოპერები უკვე წარმოუდგენელია HTML5-ისა და CSS3-ის გარეშე, რაც არ უნდა თქვას.
ნებისმიერ პროექტს, ნებისმიერ მომხმარებელს სჭირდება მოქმედი, ჯვარედინი ბრაუზერი და თანამედროვე HTML5 და CSS3 განლაგება, რომელიც უნდა იყოს ადაპტირებული მობილური მოწყობილობებისთვის.
თუ იცით, როგორ აკრიფოთ HTML5 და CSS3 და მოახდინოთ პროექტის ადაპტაცია მობილურ მოწყობილობებზე, მაშინ შეგიძლიათ უსაფრთხოდ გაზარდოთ თქვენი მუშაობის ერთი საათის ღირებულება.
კარგად, თუ თქვენ ქმნით ვებსაიტს თქვენთვის, მაშინ ეს ცოდნა დაგეხმარებათ გახადოთ ის უკეთესი, უფრო ფუნქციონალური და მოსახერხებელი. როგორც წესი, ეს იწვევს პოზიციების ზრდას, დასწრების ზრდას და, შესაბამისად, შემოსავლის ზრდას.

Იცი, რომ...

ახლა შიგნით ძიების შედეგები(ტოპ 10-ში) Yandex 55% არის საიტები საპასუხო დიზაინირომელსაც შეუძლია მობილურ მოწყობილობებთან ადაპტირება. ეს იმაზე მეტყველებს, რომ Yandex (და Google ასევე) უფრო მეტ უპირატესობას ანიჭებს საიტებს ადაპტური დიზაინით. იმათ. ისინი, რომლებზეც მომხმარებელი კომფორტულია.
და საიტისთვის დამატებულია HTML5 და CSS3 დამატებითი ფუნქციები, რომლითაც ჩვენ შეგვიძლია გავხადოთ საიტი კიდევ უფრო მოსახერხებელი.
როგორც მომხმარებლებისთვის, ასევე რობოტებისთვის.
სადესანტო გვერდი ( სადესანტო გვერდი, სადესანტო გვერდი) გამოიყენება ვიზიტორების აბონენტებად ან მომხმარებლებად გადასაყვანად.
ასევე ზოგჯერ გამოიყენება ტრაფიკის სეგმენტაციისთვის.
სადესანტო გვერდი შეიძლება იყოს ერთი ცალკეული გვერდი დომენზე, ან როგორც სრულფასოვანი ვებსაიტის ნაწილი.
ამ შემთხვევაში, საიტი დაწინაურებულია ძიებაში, ხოლო სადესანტო გვერდი გამოიყენება რეკლამისთვის Yandex.Direct-ში, Google Adwods-ში, Target Vkontakte-ში და ა.შ.
ეს კომბინაცია საშუალებას გაძლევთ მაქსიმალურად გამოიყენოთ სხვადასხვა ინტერნეტ მარკეტინგის ინსტრუმენტები.
ახლა არის შესაძლებლობა სწრაფად ისწავლოთ და გამოიყენოთ ეს ყველაფერი თქვენს საქმიანობაში.

HTML5 + CSS3 + რეაგირება + სადესანტო გვერდი
ამ კურსით თქვენ შეძლებთ:

შექმენით საპასუხო ვებსაიტები და გვერდები
მობილურ მოწყობილობებზე ადაპტირება
გამოიყენეთ HTML და CSS-ის ძალა თქვენს ან კლიენტის პროექტებში
შექმენით ნებისმიერი სადესანტო გვერდი: გადაიღეთ გვერდები, გამოწერის გვერდები, პროდუქტის სადესანტო გვერდები და ა.შ.
დაამატეთ სხვადასხვა ეფექტები და სკრიპტები სადესანტო გვერდზე
მოწინავე ფორმების შექმნა და გამოყენება უკუკავშირიდა უფრო მეტი.
ამ ვიდეო კურსით, სულაც არ გაგიჭირდებათ!

კურსის შეჯამება

შესავალი

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

პრაქტიკული ნაწილი

სადესანტო გვერდის ეტაპობრივი შექმნა.
დაწყებული განლაგების დაგეგმვით, სხვადასხვა სირთულის თითოეული ბლოკის განლაგებამდე, სკრიპტებისა და php დამმუშავებლების დაკავშირებამდე ფორმებისთვის
კარუსელი/სლაიდერი, გლუვი გადახვევა, ღილაკები, CSS sprites, ფორმის ვალიდაცია და ა.შ.

დამატება. მასალები

დამატებითი მასალები შეიცავს ყველა სკრიპტს და წყაროს, რომლებთანაც ჩვენ ვიმუშავებთ + თაღლითური ფურცლები კოდით, რომელიც უბრალოდ უნდა დააკოპიროთ და ჩასვათ სწორ ადგილას.
ისევე როგორც სხვა სასარგებლო რესურსები.
ვიდეო გაკვეთილების რაოდენობა: 23

რის გაკეთებას შეძლებთ ამ კურსის დასრულების შემდეგ?

Მზადებაში

PSD განლაგების გაგება Photoshop-ით
ამოიღეთ სასურველი სურათები PSD განლაგებიდან
იპოვე ლამაზი დიზაინებისადესანტო გვერდი და საიტები
ბლოკების დიზაინი და განლაგების ნაბიჯები
შეაერთეთ ხატები CSS Sprites-ში
PhpDesigner-თან მუშაობა

განლაგების თვალსაზრისით

დაკავშირება ლამაზი შრიფტებიგუგლის საცავიდან
გამოიყენეთ ფსევდო-კლასები ეფექტურად
საიტის ადაპტირება ყველა მობილური მოწყობილობისთვის
გამოიყენეთ 2 ან მეტი ბლოკის ფონი, ანიმაცია, ტრანსფორმაცია, RGBA და ა.შ.
იმუშავეთ @media შეკითხვებთან
Yandex-ის ინტერაქტიული რუქების ჩასმა
შექმენით CSS sprites და დააჩქარეთ გვერდის ჩატვირთვა
გამოიყენეთ წინასწარ შემუშავებული სტილები (მსგავსი ჩარჩოები, როგორიცაა Bootstrap)

გაუმჯობესების თვალსაზრისით

ჰოვერის ეფექტების შექმნა ("ანიმაცია" ჰოვერზე)
გააკეთეთ გლუვი გადახვევა ბლოკებზე და ღილაკზე "Up"
დაადასტურეთ საკონტაქტო ფორმები jQuery-ით
შექმენით ჭკვიანი გამოხმაურების ფორმები UTM ტეგებით
შეაერთეთ და დააკონფიგურირეთ მიზნები Ya.Metrika-ში მოვლენების გამოყენებით
გაანათეთ გვერდები მათი უფრო სწრაფად ჩატვირთვის გზით
შეამოწმეთ და გამოასწორეთ ხარვეზები გვერდებზე

ვენესუელის ლიდერმა ნიკოლას მადურომ RT-ის რაფაელ კორეას ეთერში განაცხადა, რომ აშშ-ის პრეზიდენტი დონალდ ტრამპი შეპყრობილია ლათინური ამერიკის ხალხებით. "მე ღიად ვლაპარაკობ...

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

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

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

თავდასხმა არა იემენიდან: საუდის არაბეთი ირანს ნავთობგადამამუშავებელ ქარხანაზე თავდასხმაში ადანაშაულებს
საუდის არაბეთის ხელისუფლებამ საჯაროდ წარადგინა დრონებისა და სხვა თვითმფრინავების ნამსხვრევები, რომლებიც გაათავისუფლეს სახელმწიფო გადამამუშავებელ ქარხნებში შაბათს, 14 სექტემბერს ღამით. სამეფოს თავდაცვის სამინისტრომ...

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

უკრაინამ კვლავ დააწესა პირობები „შტაინმაიერის ფორმულის“ განხორციელებისთვის.
ოთხშაბათს მინსკში გამართულ საკონტაქტო ჯგუფის რეგულარულ შეხვედრაზე უკრაინის დელეგაციამ კვლავ დააწესა მკაცრი პირობები კიევის მიერ მინსკის შეთანხმებების პოლიტიკური პუნქტების შესასრულებლად. ეს დადასტურდა...

ჯონსონმა და ტრამპმა განიხილეს საუდის არაბეთის ნავთობგადამამუშავებელ ქარხნებზე თავდასხმის საჭიროება
ლონდონი, 18 სექტემბერი - რია ნოვოსტი, მარია ტაბაკი. ბრიტანეთის პრემიერ-მინისტრმა ბორის ჯონსონმა და აშშ-ს პრეზიდენტმა დონალდ ტრამპმა საერთაშორისო პარტნიორებისგან ერთიანი დიპლომატიური პასუხისკენ მოუწოდეს...

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

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

ნეთანიაჰუ ისრაელებს უპირისპირდება
ისრაელის პრემიერ-მინისტრმა ბენიამინ ნეთანიაჰუმ კომენტარი გააკეთა არჩევნების წინასწარ შედეგებზე, რომელშიც ნაციონალისტური პარტია ლიკუდი მეორე ადგილს იკავებს. არის შესაბამისი პოსტი...

„შტაინმაიერის ფორმულა“: კიევი დონბასზე დათმობაზე წავიდა
უკრაინის საგარეო საქმეთა მინისტრი ვადიმ პრისტაიკო დათანხმდა შტაინმაიერის ფორმულის გამოყენებას დონბასში კონფლიქტის მოსაგვარებლად. ეს ინიციატივა რეგიონს განსაკუთრებულ...

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

სანამ დაიძინებ: ცენტრალურმა ბანკმა ლეგალურად მიიჩნია რუსების ანგარიშების დაბლოკვა
„ისინი მართავდნენ საკუთარ თავს“: ახალი გეგმა ყირიმის „დაბრუნებისთვის“ RIA Novosti Crimeans-ი უკრაინაში გაეშვება, თუ ის არ გაავრცელებს ლპობას და შექმნის შესაძლებლობას. ამის შესახებ „ფედერალური სააგენტოს“ ცნობით, ...

მედია: ნეთანიაჰუმ გააუქმა მოგზაურობა გაეროს გენერალურ ასამბლეაში ქვეყანაში შექმნილი პოლიტიკური ვითარების გამო
ისრაელის პრემიერ მინისტრი ბენიამინ ნეთანიაჰუ მომავალ კვირას ნიუ-იორკში არ გაემგზავრება გაეროს გენერალური ასამბლეის 74-ე სესიის ზოგად პოლიტიკურ დებატებში ქვეყანაში შექმნილი პოლიტიკური ვითარების გამო...

უკრაინამ დონბასის სპეციალური სტატუსის შესახებ გადაწყვეტილება მიიღო
უკრაინის საგარეო საქმეთა მინისტრმა ვადიმ პრისტაიკომ ისაუბრა ნორმანდიის ოთხეულის მონაწილეების მიერ მიღწეულ შეთანხმებაზე დონბასისთვის სპეციალური სტატუსის მინიჭების ე.წ შტაინმაიერის ფორმულაზე. Ამის შესახებ...

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

უკრაინა დონბასიდან ჯარების გასაყვანად ემზადება
გაერთიანებული ძალების ოპერაციის (JFO) მეთაურმა ვლადიმერ კრავჩენკომ გამოაცხადა მზადება დონბასში სადემარკაციო ხაზიდან იარაღის გაყვანისთვის. ამის შესახებ მან მუდმივ...

ვადები და საგზაო რუქები: რუსეთ-ბელორუსიის ინტეგრაციის გეგმები
რუსეთისა და ბელორუსიის ინტეგრაციის გეგმა პრეზიდენტებმა ვლადიმერ პუტინმა და ალექსანდრე ლუკაშენკომ 8 დეკემბრამდე შეიძლება დაამტკიცონ. „საგზაო რუკები“ შემუშავებულია 31 მიმართულებით. 1 ნოემბრამდე მოსკოვის...

გამარჯვებული არ წყვეტს: ვინ ჩამოაყალიბებს ისრაელის მთავრობას?
ისრაელის ვადამდელ საპარლამენტო არჩევნებს ჯერ არ გამოუვლენია აშკარა გამარჯვებული, თუმცა, ქვეყნის ცენტრალური საარჩევნო კომისიის წინასწარი მონაცემებით, მემარჯვენე ლიკუდის ბლოკი უსწრებს თავის კონკურენტს - ...

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

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

სიახლე HTML5-სა და CSS3-ში

გადავწყვიტე შევამოწმო, შესაძლებელია თუ არა (?) საიტის ადაპტირება ყველა მოწყობილობაზე, გარეშეტექნოლოგიის გამოყენება HTML5 და CSS3 .

Ვცდილობ!

აკრეფილი კოდირებით "ANSI" და სრული სერვისის ჩანაწერით: "HTML 4.01 გარდამავალი" , ნაცვლად წესებით დადგენილისა HTML5:

ახალი ტეგები: სათაური, სექცია, სტატია არ გამოიყენა. აღმოჩნდა, რომ ბლოკის განლაგება საკმარისია, როგორც ყოველთვის ტეგებზე დივ .

ახალი ფორმის ატრიბუტიტეგებზე შეყვანა "ადგილის მფლობელი" (მინიშნება) ბრაუზერში IE8 არამუშაობდა. დანარჩენში - სამუშაო.

ანალოგიურად. ახალი "ტიპის" ატრიბუტიტეგებზე შეყვანა ტიპი = "ელფოსტა" მუშაობს მხოლოდ თანამედროვე ბრაუზერებში.

ატრიბუტი "ღირებულება" ჯერ კიდევ გამოიყენება მნიშვნელობების შეყვანა ფორმებად.

Ყველაზე მნიშვნელოვანი რამ! პირველ რიგში, საიტი იწერება ჩვეულებრივ მონიტორზე და მხოლოდ ამის შემდეგ ტეგში ხელმძღვანელი კოდის ხაზის ჩასმა:

ეს ჩანაწერი ეუბნება ბრაუზერს ( ** როგორც კურსშია ახსნილი!), ასე რომ, ის სწორად მასშტაბირებულიგვერდის შინაარსი მოწყობილობისთვის, რომელსაც იყენებთ.
თუმცა, ფაქტობრივად, ასეთი ჩანაწერი ბრაუზერი აბსოლუტურად არაფერს ამბობს. ეს არის "მიმართვა" საძიებო სისტემებში.
მაგრამ ისინი უკვე ოჰ-ო-ძალიან "მოშურნეები" არიან ტეგში ასეთი ჩანაწერის არსებობის / არარსებობის შესახებ ხელმძღვანელი , განსაკუთრებით ბოლო დროს. შემოწმებულია!

თუმცა, უნდა ითქვას, რომ თანამედროვე ბრაუზერები მობილური მოწყობილობები, ეტყობა მაინც ისწავლეს „სხვის წერილების“ კითხვა.

**Მაგალითად.კოდის ამ ხაზის ტესტირებისას მე დავამატე არაადაპტირებულივებგვერდის გვერდი და... ... ... . და შემდეგ სწრაფად ამოიღეს!

სმარტფონზე მისი ჩვენების შემოწმების შემდეგ დავინახე, რომ სმარტფონის ბრაუზერმა „საშინელება“ გამოსცა, ე.ი. აჩვენა გვერდის სრული ზომა, რაც უზრუნველყოფს შესაძლებლობას გრძელი ჰორიზონტალური გადახვევა.

ახალი ატრიბუტი ტეგებისთვის img "srcset" ტესტირებულ ვერსიაში "HTML 4.01" არ მუშაობს!

შეგახსენებთ და ხაზს ვუსვამ, რომ მე მედიისთვის არანაირი შეკითხვა არ გაუკეთებია. ტესტები!

CSS ცხრილის ჩანაწერების მაგალითები

უპირველეს ყოვლისა, რის შესახებ (?) შემოწმდება css თვისებებიდა როგორ(?) მუშაობდნენ.

ქონების ფონი-ზომა: საფარი; უკეთესია Არ გამოიყენოთ. ნახატები „მოჭრილია“, ე.ი. მონიტორის ეკრანებს სცდება. თქვენ უნდა გაადიდოთ, რომ ნახოთ ისინი მთლიანობაში.

და პირიქით!

ქონების ფონის ზომა: შეიცავს; მუშაობს მშვენივრად! ყველა ბრაუზერში! ოპტიმალური ამისთვის "ცენტრი"ნახატები. ეს მათია სასწორები დიდინებისმიერი ზომის მონიტორისთვის.

ანალოგიურად.

იგივე თვისება background-size: contain; მშვენივრად მუშაობდა "გვერდითი"ნახატები, ე.ი. მარცხენა მარჯვენა. სცადა!

გვერდითი ნახატები ნაჩვენებია ტეგების საშუალებით სპანი , ვაძლევთ მათ ათწილადს: მარცხნივ ან მარჯვნივ, მაგრამ მთავარი!
მთავარია, რომელმაც გამოაქვეყნა ნახატი როგორც ფონზე 2 უწყვეტი სივრცე სიმბოლო , მიცემა ტექსტის ზომა, სიმაღლის ტოლი ფონის სურათი (** ტექსტის ზომის შემცირებით, სურათი მცირდება პროპორციულად, დამახინჯების გარეშე).

გამომავალი დიაგრამები ქვემოთ.

  <— это HTML

Span#proba8 ( <— здесь CSS
ფონი: url(images/proba8.jpg) გამეორების გარეშე;
float: მარცხენა;
შრიფტის ზომა: 240px;
ფონის ზომა: შეიცავს;
ზღვარი: 020 პიქსელი;
ბალიშის ქვედა ნაწილი: 0
}

ზემოთ მოცემული სქემის მიხედვით გამოტანილ სატესტო ნახატს ჰქონდა რეალური ზომა 210x240px. ის კარგად მოერგებოდა და სრულად იყო ნაჩვენები მონიტორზე გარჩევადობა 120x150.

ყველაფერი მუშაობს! მაგრამ!

როდესაც შევამოწმე ასეთი გამომავალი სქემის გამოყენება ჩემს "პოლიგონზე", აღმოვაჩინე მნიშვნელოვანი გარეგნობა სიცარიელეები ნახატების წინ და შემდეგ, სმარტფონზე გვერდის ნახვისას. ეს განსაკუთრებით შესამჩნევი იყო ვერტიკალურად დათვალიერებისას. თუნდაც!
მიუხედავად იმისა, რომ ეს ეწერა CSS წესებში: ამოიღეთ ზედა/ქვედა ჩაღრმავები!

ამიტომ ყველაფერი გვერდითი ნახატებიამ გვერდის გამოსასვლელად ჩვეულებრივი გზით, ყოველგვარი ადაპტაციური „მოხნაობის“ გარეშე.

უფრო მეტიც, ყველაზე დიდი გვერდითი ნახაზის ზომა ამის საშუალებას იძლეოდა.

მართალია, ამ შემთხვევაში გვერდითისურათები ნაჩვენებია ძალიან დიდი, რაც ნამდვილად არ ემთხვევა მათ მთავარი(ადაპტირებული) "კოლეგები", მაგრამ... ... ... .
აქ ყველა ირჩევს იმას, რაც საუკეთესოა. „ორი ბოროტებიდან“ ავირჩიე უმარტივესი.

** და ბოლო.ფაილი "ნულოვანი"სტილები გადატვირთვა.css არ დაუკავშირდა ამ გვერდს. ასეთი მარტივი საიტებისთვის ეს არ არის საჭირო. დიახ, და... ...მე ის არ მომწონს. დალიე-და-სივაეშ მერე ისევ თავიდან.

ისე, სერიოზულად - გადმოწერის სიჩქარე. ყოველი დამატებითი ფაილი არის სერვერის ზარი.

ახლა რამდენიმე სტრიქონი ადაპტაციის შესახებ.

Პირველიმოგვცა კოდის დაწერის მაგალითი, რათა შემცირდეს ორი შეყვანის ველი (სახელი და ელ. ფოსტა) ფორმის ტეგებში 200 პიქსელამდე (იმ შემთხვევაში, თუ ისინი ნახულობენ მობილურ მოწყობილობებზე) Ისე, როგორც ეს მინი კურსში იყო მოცემული . უცნაური შესვლა!

მედია ეკრანი და (მაქს. სიგანე: 900 პიქსელი) (

სიგანე: 200 პიქსელი ;))

სინამდვილეში, მედიის მოთხოვნის კოდი განსხვავებული უნდა გამოიყურებოდეს.

@media (მაქს. სიგანე: 900 პიქსელი) (
.subscribe input, .subscribe input(
სიგანე: 200 პიქსელი ;))

*პრიმ.გამოყენება ფიქსირებული სიგანეჯობია დააკონკრეტო მაქსიმალური ზომა.

ოპტიმალური ზომა ფიქსირებული სიგანისთვის არის 1200px±

ესენი "მედია მოთხოვნები"დიზაინი გამახსენდა თუ (პირობა) (შესრულება) ენებიდან: PHPდა JavaScript. მათთან ერთად ჩვენ ვაშენებთ საიტის სტილებს ეკრანების ზომის მიხედვით.

მითითება

შრიფტებთან სწორი მუშაობისთვის მიზანშეწონილია მათი ზომები მიუთითოთ არა "px", არამედ "em"-ში და ასევე თავად აიღოთ შრიფტები ე.წ. "უსაფრთხო CSS შრიფტის დასტა".

Photoshop-ში გავაკეთე სპეციალური ნახატი, საიდანაც შეგიძლიათ გაიგოთ რომელ შრიფტებს ეკუთვნის "უსაფრთხო"და რაც მთავარია - რატომ (?!):

1em = 16px

მართალია, უნდა ითქვას, რომ ასეთი თარგმანი საკმაოდ „პირობითია“, თუმცა მინი კურსში ამის შესახებ არც ერთი სიტყვაა!

თქვენ შეგიძლიათ დეტალურად გაიგოთ არსებული საზომი ერთეულების შესახებ და როგორ ხდება მათი ერთმანეთში გარდაქმნა შესანიშნავ სტატიაში თანდართული არქივიდან.

ერთეულების ნიმუშები ადაპტური განლაგებისთვის

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

მით უმეტეს, რომ პიქსელები, ჩემი აზრით, სრულყოფილი მორგებაადაპტური განლაგებისთვის, რადგან ისინი ზუსტად "მიბმულია". მონიტორის ზომები და გარჩევადობა გამოყენებული მოწყობილობები.

სხვა სიტყვებით რომ ვთქვათ, თითოეულ მოწყობილობას ექნება თავისი პიქსელის ზომა და თუ ერთი ერთეულიდან მეორეზე არ „გახვევთ“, არამედ ყველაფერს გამოხატავთ იმავე საზომი ერთეულებით, შედეგი დადებითი იქნება!

რას ხედავთ სინამდვილეში თქვენს მოწყობილობაზე ამ გვერდის ნახვისას.

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

ამიტომ, ცოტა ვივარჯიშე ამ საცდელ გვერდზე, მე "გავაფურთხე" ყველა სახის ადაპტირებულ განლაგებაზე და დავიწყე აკრეფა ჩემთვის ჩვეული, ნაცნობი გზით. დაიღალა!

ისე, სერიოზულად, დავწერე ამის შესახებ გვერდის ბოლოს.

მათ, ვისაც ჯერ კიდევ სჭირდება ადაპტირება, ყურადღება უნდა მიაქციოს ბრაუზერებში უკვე ჩაშენებულ ინსტრუმენტებს.

ვებ განვითარების სასარგებლო ინსტრუმენტები

ბრაუზერში ადაპტური განლაგების შემუშავება Firefoxარის შესანიშნავი(!) ინსტრუმენტები.

ეს ჩანართი იხსნება F12 კლავიშის დაჭერისას

ღილაკი "ადაპტური დიზაინი"საშუალებას გაძლევთ ნახოთ, როგორ გამოიყურება გვერდი სხვადასხვა ზომის მონიტორებში და სხვადასხვა ორიენტირებით (ვერტიკალური/ჰორიზონტალური).

ამ ხელსაწყოს ღილაკის გამოყენების დეტალები აღწერილია აღნიშნულ მინიკურსში.

მართალია, მინდა ვთქვა, რომ მე თვითონ მირჩევნია ჩეკიდამზადებულია რეალური მოწყობილობები , რომელიც აღმოფხვრის ბრაუზერების „უცნაურობებს“.
ღილაკი, რა თქმა უნდა, ძალიან სასარგებლოა და ძალიან ეხმარება, მაგრამ... ... ...

მათ, ვისაც არ აქვს ასეთი შესაძლებლობა, შეამოწმოს საკუთარი ვებ გვერდები, შემიძლია ვურჩიო საინტერესო რესურსი ადაპტაციის შესამოწმებლად: "უცნაური ხელსაწყოები" (გაიხსნება ახალ ფანჯარაში).

** მაგრამ! უნდა გვახსოვდეს!
ის მხოლოდ გვერდებს აჩვენებს უკვე ატვირთულია ინტერნეტში.
გარდა ამისა - მისი სერვერი ძალიან ხშირად "ვარდება" (ანუ მიუწვდომელია).

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

ბოლო რაც თქვენ უნდა იცოდეთ: რეალური მობილური მოწყობილობებისაიტები განსხვავებულად გამოიყურება და არა ისე, როგორც ნაჩვენებია სხვადასხვა გადამოწმების სერვისებით.

დასკვნა, დასკვნები

როგორც უკვე დავწერე, ცოტა ვივარჯიშე აქ, ამ გვერდზე, ადაპტირებაზე "გავაფურთხე" და დავიწყე ჩვეული წესით აკრეფა. და ეს შემთხვევითი არ არის!

ჯერ ერთი:განლაგების სირთულე ბევრჯერ იზრდება და მასთან ერთად CSS კოდის ზომაც.
რა არის ცუდი, დეტალურად აქ: "საიტის განვითარება"(ახალ ფანჯარაში).

Მეორეც:და "ადაპტაციური სიბრძნის" გარეშე შეგიძლიათ შექმნათ საიტები, რომლებიც ჩვეულებრივ ნაჩვენებია მობილურ მოწყობილობებზე, რისთვისაც მათ მეტი უნდა მიეცეს დაფიქსირდასიგანე.
მაგალითი: "პირადი გვერდი" (გაიხსნება ახალ ფანჯარაში).

მესამე:გამომდინარეობს წინადან, რადგან შინაარსი დაფიქსირდაგვერდები მონიტორზე არ იქნება „გაწურული“, თუ საიტს ეწვიეთ დიდი ეკრანის მქონე კომპიუტერზე.

მეოთხე:ხშირად ვხედავ საიტებს ითვლება ადაპტირებულად, მაგრამ საკუთარი თავისთვის შინაარსი შეწყვეტილიაისე ანგარიშიმათი სახის შეამცირეთ 2-3-ჯერ!

მეხუთე:მეოთხე პუნქტიდან გამომდინარეობს. მაშ რა განსხვავებაა(?!) ჩემსას არასაპასუხო გვერდებიზე სმარტფონები უნდა დაშორდეს ერთმანეთსთითები სასურველ ზომამდე. დიახ, და ეს! მხოლოდ ნახვის მოხერხებულობისთვის. შინაარსი ხელუხლებელია!

სხვათა შორის, სმარტფონები არ არის კრიტიკული ჩემი საიტისთვის. Იმდენად, რამდენადაც, 97%-ზე მეტიმას სტუმრები მოდიან ჩვეულებრივი კომპიუტერებიდან და ტაბლეტებიდან და 3%-ზე ნაკლები სმარტფონებიდან.

შეგიძლიათ გააგრძელოთ ეს „გლოვის სია“, მაგრამ მგონი საკმარისია. საკმარისად მიამბო იმ მიზეზებზე, რის გამოც დავიღალე ადაპტური განლაგებით, რომელიც შეისწავლამაგრამ მიმართეთ არააპირებს.

Რისთვის?!

რატომ ართულებს ის, რაც შეიძლება უფრო ადვილი იყოს?! ყოველგვარი „შამანური ადაპტაციური ცეკვების“ გარეშე.

დასკვნა - არ არის საჭიროება!

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

თუ რაიმე ძნელი დასანახია, შეგიძლიათ თითებით დააჭიროთ მას. არაფერი საშინელი! თანამედროვე ელექტრონული მოწყობილობები ჭკვიანია! ისინი საშუალებას გაძლევთ გააფართოვოთ მონიტორის ეკრანის ხილვადობა.

გარდა ამისა, შეეცადეთ "გააგრძელოთ" კოდი (მუდმივი გაზრდით) არსებული მოწყობილობების ყველა შესაძლო ზომისთვის - უტოპია!

მაგალითად, მეორე დღეს ჩემმა ძმისშვილმა აჩვენა თავისი ახალი შენაძენი. საათი-სმარტფონიოდნავ აღემატება ასანთის კოლოფს.
Მერე რა?!
იჩქარო ახლა "თავგადასული" ასანთის კოლოფის ზომების ქვეშ კოდის დასაწერად?! შემდეგ კი იქნება (ან შესაძლოა უკვე გამოჩნდა) ბროშის ზომის კომპიუტერი. Მერე რა?!
ისევ შევცვალო კოდი? ჰო, კარგი, ლეღვში, გააკეთეთ ასეთი "პრობლემური საიტები"! უფრო მარტივი......

სინამდვილეში, მთელი ჩემი რესურსი განკუთვნილია მათთვის, ვისაც სურს ისწავლოს მარტივი საიტების შექმნა და სიამოვნებით შექმნას ისინი და არა თავად ეძებოს "თავის ტკივილი". Რაღაც მაგდაგვარი... ... ...

თუმცა ეს ჩემი პირადი აზრია. ვისაც მაინც უნდა ამის გაკეთება, შორს მიხედოს.

მნიშვნელოვანი დამატება

მათთვის, ვისაც სურს უკეთ გაიგოს სხვადასხვა ტიპის განლაგება, უაღრესად გირჩევთ პირველი(მინიკურსის შესწავლამდე) ჩამოტვირთეთ და წაიკითხეთ ორი კარგი, საინტერესო სტატია: "ადაპტური განლაგება ან მობილური ვერსია"და "ადაპტური დიზაინი".

და ამის გარდა!

აუცილებლად წაიკითხეთ სტატია თანდართული არქივიდან ქვემოთ.

რატომ არის საჭირო?

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

მაგრამ ყველაზე მნიშვნელოვანი რამ(!)-სხვა მიზეზის გამო.

და ამ ფორმის შევსებით, შეგიძლიათ მიიღოთ საინტერესო სასწავლო ვიდეო კურსი ადაპტური განლაგების შესახებ.

გამოვაქვეყნეთ ახალი წიგნი „სოციალური მედიის კონტენტ მარკეტინგი: როგორ მოხვდეთ აბონენტების თავში და შეაყვაროთ ისინი თქვენი ბრენდი“.

კერძოდ, ეს ტექნოლოგია აქტიურად გამოიყენება იმისთვის, რომ საიტი ერთნაირად გამოიყურებოდეს სხვადასხვა ტიპის მოწყობილობებზე: კომპიუტერებზე/ლეპტოპებზე და სმარტფონებზე/ტაბლეტებზე სხვადასხვა ზომის ეკრანზე.

საპასუხო ვებსაიტი დღეს იქმნება HTML5 მარკირების ენისა და CCS3 კასკადური სტილის ფურცლების გამოყენებით. მაგრამ იმ მომენტამდე, როდესაც შესაბამისი ტექნოლოგიები გახდა სტანდარტი ყველა პოპულარული ბრაუზერისთვის, JavaScript პროგრამირების ენა გამოიყენებოდა შესაბამისი მიზნებისთვის. ადრეც (2010 წლამდე) მათ უნდა შეექმნათ ერთი და იგივე გვერდის რამდენიმე ვერსია, მაგრამ განსხვავებული მარკირებით, რათა მათ მიერ შემუშავებული საიტი სწორად გამოჩენილიყო სხვადასხვა ეკრანებზე.

რატომ გჭირდებათ საპასუხო გვერდის განლაგება?

შედარებით ცოტა ხნის წინ, ბრაუზერის ბოლოში ბევრ საიტს ეწვიეთ, შეგიძლიათ იხილოთ სლაიდერი, რომელიც გვერდს ჰორიზონტალურად ახვევს. ეს მოხდა, მაგალითად, თუ ინტერნეტ ბრაუზერის ფანჯარა არ გაფართოვდა სრულ ეკრანზე, მაგრამ დაიკავა მისი შედარებით მცირე ფართობი. ასევე თითქმის ყოველთვის შეიძლებოდა მისი დანახვა, როდესაც ეკრანის გარჩევადობა, რომელზეც გამოსახულება იყო ნაჩვენები, იყო 800 x 600 ან, მით უმეტეს, 640 x 480 პიქსელი.

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

რატომ და როდის გამოჩნდა საპასუხო დიზაინი?

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

• ახალი მომხმარებლების მასიური შემოდინება ინტერნეტში;
• მრავალი მოწყობილობის გაჩენა ეკრანის სხვადასხვა გარჩევადობით;
• ზეწოლა საძიებო სისტემებიდან, რომლებმაც დაიწყეს სანქციების გამოყენება საიტების მიმართ, რომლებსაც ჰქონდათ ერთი და იგივე შინაარსის გვერდის რამდენიმე ვარიანტი.

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

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

რისი დახმარებით და როგორ იქმნება ადაპტური განლაგება?

სანამ გადაწყვეტთ კითხვის განხილვას, რომელიც ეხება ადაპტაციური განლაგების გაკეთებას, აუცილებელია მოკლედ განვიხილოთ გამოყენებული ძირითადი ტექნოლოგიები. ახლა ორი მათგანია: HTML5 და CSS3. ბოლო დრომდე გამოიყენებოდა HTML4 და CSS2, მაგრამ მათთან უნივერსალური დიზაინის შესაქმნელად, JavaScript-ის გამოყენებაც მოგიწიათ.

CSS3 არის კასკადური სტილის ფურცლების შემდეგი თაობა. ეს ტექნოლოგია გამიზნულია მომხმარებლის ბრაუზერში გვერდის ელემენტების ჩვენების წესების შესაქმნელად. მასთან ერთად შეგიძლიათ მიუთითოთ, მაგალითად, რა ზომა უნდა ჰქონდეს ელემენტს მომხმარებლის ეკრანის გარკვეულ გარჩევადობაზე, ან დააწესოთ წესი, რომ მან ყოველთვის უნდა დაიკავოს სივრცის გარკვეული პროცენტი (100% - ავსებს მთელ სამუშაო ფართობს. ბრაუზერი).

მესამე თაობაში გაჩნდა „მედია queries“ წესი, რომლის გამოყენებით განლაგების დიზაინერს შეუძლია შექმნას ცალკე კლასები თითოეული კონკრეტული ნებართვისთვის.

ძალიან მნიშვნელოვანი წერტილი!

ადამიანმა, რომელიც გეგმავს CSS3-ის გამოყენებას საპასუხო დიზაინისთვის, უნდა იცოდეს, რომ CSS2-ისგან განსხვავებით, Cascading Style Sheets 3 არ იყენებს პიქსელებს, არამედ პროცენტებს ობიექტების ზომის დასაზუსტებლად.

რაც შეეხება HTML5-ს, ის პირდაპირ აღნიშნავს გვერდს, ანუ მიუთითებს სად უნდა განთავსდეს გარკვეული ელემენტები. იმისათვის, რომ ობიექტებმა შეცვალონ გარჩევადობა, HTML ტეგის პარამეტრები განსაზღვრავს CSS3-ის გამოყენებით ადრე შექმნილ კლასებს.

საპასუხო განლაგების მარტივი მაგალითი

იმის გასაგებად, თუ რა არის საპასუხო განლაგება, მაგალითები უნდა იყოს რაც შეიძლება მარტივი. მაშასადამე, მოდით განვიხილოთ ვარიანტი, რომელშიც მომზადებული სურათი ავტომატურად რეგულირდება ბრაუზერის სამუშაო არეალის გარჩევადობაზე.

პირველ რიგში, HTML-ის გამოყენებით, ჩვენ თავად ელემენტს განვათავსებთ გვერდზე:

DIV ტეგი მიუთითებს, რომ რასაც ის შეიცავს არის ცალკე ბლოკი. როდესაც გვერდზე ბევრი ასეთი ბლოკია, მითითებულია "კლასი" ატრიბუტი. ეს აუცილებელია იმისათვის, რომ ბრაუზერმა გაიგოს, თუ რომელი წესი უნდა მიმართოს კონკრეტულ ბლოკს.

ახლა თქვენ უნდა შექმნათ წესი თავად, ე.წ

CSS კონტეინერი:

Div ( სიგანე: 100%; ტექსტის გასწორება: ცენტრში; ) div img ( წონა: 100%; სიმაღლე: ავტომატური; )

ეს კოდი უბრალოდ ადგენს ნებართვებს ადაპტური განლაგებისთვის. კერძოდ, მასში ნათქვამია, რომ სიგანე (wight) ყოველთვის უნდა იყოს ბრაუზერის კლიენტის არეალის სიგანის 100%, ხოლო სიმაღლე (სიმაღლე) ავტომატურად რეგულირდება.

ადაპტური განლაგების შემოწმება

არსებობს სპეციალური ინსტრუმენტები ადაპტური განლაგების შესამოწმებლად. მაგალითად, GoogleChrome ბრაუზერში შეგიძლიათ დააჭიროთ "F12" ღილაკს, შემდეგ კი, პანელში, რომელიც იხსნება, დააწკაპუნეთ სმარტფონისა და ტაბლეტის გამოსახულების ხატულაზე. ამ მოქმედების შემდეგ გამოჩნდება კიდევ რამდენიმე პანელი, რომელშიც უნდა მიუთითოთ ინტერესის გარჩევადობა.

ეს შეიძლება კიდევ უფრო გაადვილდეს. იმისათვის, რომ შეამოწმოთ მუშაობს თუ არა საპასუხო დიზაინი, თქვენ უნდა გეჭიროთ CTRL და შემდეგ დააწკაპუნოთ "+" ან "-". ამ მოქმედების შემდეგ, გვერდი უნდა გაიზარდოს ან შემცირდეს შესაბამისად, მაგრამ ელემენტი, რომელზეც გამოიყენება ადაპტური განლაგება, შეინარჩუნებს მისი პროპორციების თანაფარდობას (ან სხვა რამეს გააკეთებს, რაც მითითებულია წესებში).

ინსტრუმენტები, რომლებიც ამარტივებს საპასუხო დიზაინის განლაგებას

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

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

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

*Bootstrap არის ღია კოდის პროგრამა, რომელიც შემუშავებულია Twitter Inc. იგი ნაწილდება უფასოდ და აქვს ფართო საზოგადოება, საიდანაც ყოველთვის შეგიძლიათ რჩევა სთხოვოთ.