საგანმანათლებლო ტექნოლოგიები - ციფრული რესურსების პორტალი

მოგესალმებით, დავიწყებ იქიდან, რომ კოდის წერა ჩვეულებრივი ტექსტის წერისგან მნიშვნელოვნად განსხვადება. მართალია HTML დოკუმენტი (იგივე — ვებ გვერდი) ჩვეულებრივი ტექსტური დოკუმენტია, მაგრამ უმჯობესია ის სპეციალურ, ამ საჭირეობებზე მორგებულ რედაქტორში აიკრიფოს. ამის საილუსტრაციოდ მარტივ მაგალითს მოვიყვან ეკრანზე თქვენ ახლა ხედავთ თქვენს მიერ აკრეფილ ყველაზე მარტივ კოდს, მე ამ კოდის ასლს Microsoft Word-ში შემოვიტან და HTML დოკუმენტად შევინახავ. თუ მიღებულ დოკუმეტს ბლოკნოტით გახსნით თქვენ მასში უამრავ ნაგავს იპოვით. არ არსებობს არგუმენტი, რომელიც ორი წინადადების გამოსატანად 40 ათასის სიმბოლოიანი კოდის საჭიროებას გაამართლებს. მოკლედ, ვთანხმდებით იმაზე, რომ ჩვეულებრივი ტექსტური რედაქტორი HTML კოდების ასაკრეფად არ გამოგადგებათ. მაშ როგორი უნდა HTML კოდის რედაქტორი? ამ კითხვაზე პასუხი მრავალნაირად შეიძლება გაიშალოს, ზოგიერთისთვის შეიძლება მნიშვნელოვანი იყოს ფასი, ზოგს ფუნქციონალური მხარე შეიძლება აინტერესებდეს, ზოგს კოდის აკრეფის სისწრაფე, სხვებს კი დანარჩენ ენებთან ინტეგრირება (მოგეხსენებათ, დრევანდელი ვებ გვერდები მხოლოდ HTML-ვერ შემოიფარგლება. დამწყებები კი ალბათ ვიზუალურ რედაქტორზე შეაჩერებენ არჩევანს. ჩემის აზრით, ის ზოგადი მოთხოვნები, რაც უნდა გავითვალისწინოთ რედაქტორის შერცევის დროს შემდეგია კოდის ამოცნობა და სხვადასხვა ფერად გამოსახვა შეცდომის ფიქსირება მოკარნახე (რომელიც დამატებით ინფორმაცის გაწვდით ამა თუ იმ ტეგის შესახებ) ასისტენტი —ტეგის ავტომატური დასრულება დამხურავი ტეგის ავტომატური ჩასმა პლაგინები უფასო ვერსია პროექტებთან მუშაოება FTP, ფერების პალიტრა, ფორმებზე მუშაობა ან და სხვა ინსტრუმენტების არსებობა სხვა ენების მხარდაჭერა CSS, JS, PHP ღრუბლოვან ფაილებთან მუშაობა მე ამ ვიდეოგაკვეთილში მინდა განახოთ აწ უკვე Adobe ის პროდუქტი Dreamweaver. ეს ფასიანი პროგრამაა და შესაბამისად ის ფუნქციონალურად საკმაოდ დატვირთულია. ჩემი არჩევანი განაპირობა იმან, რომ ამ პროგრამაში ადვილად შეგიძლიათ წეროთ კოდი და იქვე ნახოთ თქვენი ნამუშევარი, ან პირიქით, ვიზუალურად (როგორც ვორდში) დააკაბადონოთ ვებ გვერდი და ნახოთ კოდი. ასეთი ტიპის რედაქტორებს WYSIWYG რედაქტორები ეწოდებათ. WYSIWYG (იშიფრება როგორც What You See Is What You Get, ინგლ. რასაც ხედავ, იმასვე მიიღებ) — რედაქტორის ტიპი, რომელიც აჩვენებს შედეგს თავად რედაქტირების დროს. ნებისმიერი ცვლილება ნაჩვენებია რეალურ დროში და ცვლილებების დამახსოვრების შემდეგ შედეგი იგივე იქნება რასაც მანამდე ხედავდით. (ვიკი) თქვენი Hello Word Adobe Dreamweaver ასე გამოიყურება. ეს არის დიზაინის რეჟიმი, ეს კი კოდის რეჟიმი (თუ დრო იქნებ იქ რომ ავკრიფო ჰელლო და კოდი დააგენერიროს). ამ პროგრამაში ასევე აღსანიშნავია პროექტზე მუშაობის შესაძლებლობა და ჩაშენებული ლოკალური ვებ სერვერი. მინდა ასევე განახოთ ერთი ონალინ რედაქტორი რომელსაც ახლა თქვენ ეკრანზე უყურებთ ჯიეს ფიდლე jsfiddle.net, ამ რედაქტორს აქვს ტეგების ავტომატური დასრულების ფუნქცია, რაც საკმაოდ აადვილებს მუშაობას. თქვენი Hello Word jsfiddle.net ასე გამოიყურება. თქვენ ონლაინ რეჟიმში ხედავთ თუ როგორ არედაქტირებს კოლეგა პირობითად შეცდომიან კოდს. აგრეთვე ამ საიტზე კოდის აკრეფის შემთხვევაში წყვილი ტეგები ავტომატურად დამთავრდება. დამხურავი ტეგის რაიმე მიზეზით არ არსებობის შემთხვევაში კოდის ნაწილი მეწამული ფერით გამოისახება, რაც შეცდომის ინდიკატორს წარმოადგენს. დაახლოებით იგივე პრინციპით მუშაობს jsbin.com ოფლაინ ბლოკნოტის ტიპის უფასო რედაქტორებში რათქმაუნდა კლასიკას წარმოადგენს Notepad++. ამ რედაქტორს გააჩნია ღია სოურს კოდი. ამ პროგრამის თქვენს კომპიუტერზე ჩასაწერად შედით ვებ გვერდზე notepad-plus-plus.org (ნაუთპედ დეშ პლას დეშ პლას დოთ ორგ). მარცხენა მხარეს თქვენ ხედავთ ბოლო ვერსიის ჩამოტვირთვის ღილაკს. დააჭირეთ წარწერას download. თქვენ მოხვდებით გვერდზე, სადაც ჩამოთვლია სხვადასხვა ვარიანტები. მწვანე ღილაკზე დაჭერით ჩამოიტვირთება საინსტალაციო პაკეტი ვინდოუსის 32 ბიტიანი ვერსიისთვის, რომელიც წარმატებით იმუშავებს 64 ბიტიან ვერსიაზეც. ჩამოტვირთვის დასრულების შემდეგ დააჭირეთ საინსტალაციო პაკეტს და უპასუხეთ კითხვებს......................... მას შეუძლია HTML და CSS სინტაქსის ამოცნობა და კოდის სხვადასხვა ფერებით გამოყოფა. აგრეთვე ტეგის პირველივე სიმბოლოს აკრეფიდან ასისტენტი შემოგთავაზებთ ამ სიმბოლოზე დაწყებული კოდების ჩამონათვალს, და საიდანაც შეგიძლიათ აირჩიოთ ტეგის სრული ტექსტი. საკმაოდ საინტერესოა წყვილი ტეგების აკეცვის ფუნქციაც, შეგიძლიათ მონიშნული კოდიც დამალოთ. პროგრამა საკმაოდ სწრაფია, და მრავალფეროვანი პალგინების გამოყენებაა შესაძლებელი. პლაგინებიდან აღსანიშნავია FTP სერვერთან მუშაობა შეგიძლიათ ასევე მოსინჯოთ სხვა რედაქტორები მაგალითად Sublime Text, https://www.sublimetext.com/ თქვენი Hello Word Sublime Text რედაქტორში ასე გამოიყურება. დააკვირდით კლავიშა Ctrl დახმარებით როგორ შეიძლება რამდენიმე ადგილის ერთდროულად ჩასწორება კოდში ასევე საინტერესოა Brekets, http://brackets.io/index.html რომელიც წარმოადგენს Adobe-ს უფასო პროდუქტს. თქვენი Hello Word Brekets ში ასე გამოიყურება. ასევე მინდა ვახსენო KompoZer რომელიც წარმოადგენს Netscape Composer-ის შთამომავალს http://kompozer.net/ ცხრილად გავაკეთოთ ვებ გვერდზე devcom.ge შეგიძლიათ ნახოთ დამატებითი ბმულები, ტესტები და სხვა რესურსები ახლა კი დაგემშვიდობებით გისურვებთ წარმატებას