Code.ge Blog » XHTML

Jetpak – დამატებების ახალი სისტემა Mozilla – სგან

იოსები — Thu, 21 May 2009 11:27:59 +0000

საერთოდ ცნობილია რომ კონკურენცია ძალიან კარგი რამ არის. ამ მტკიცებულების სისწორის კიდევ ერთი ძალიან კარგი მაგალითი გვაქვს სახეზე კერძოდ კი Google Chrome – სა და Mofilla Firefox – ის ე.წ. extension – ების სისტემების სახით.

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

ცხადია ასე პირველივე დღიდან ყველაფერის ჩადებას ვერ მოახერხებდა Google თავის ახალ ბრაუზერში, თუმცა, როგორც მალე გაირკვა შეჩერებასაც არ აპირებდა. სულ რამდენიმე თვეში გამოჩნდა პირველი პროპოზალი რომელიც Chrome – ს დამატებების პლატფორმას შეეხებოდა. თუმცა ამ პროპოზალში ერთმა მეტად საგულისხმო დეტალმა გაიჟღერა – განსხვავებით FF – ის ანალოგიური სისტემისგან Chrome – ს დამატებების შესაქმნელად საკმარისია მხოლოდ HTML/CSS და JavaScript. არავითარი XUL, არავითარი რთული XML კონფიგურაციის ფაილები დამატების ინსტალაციისათვის და ა.შ.

Google – ს ეს გდაწყვეტილება ჩემთვის პირადად გაცილებით მისაღები იყო რადგან XUL – ის ვერანაირ აუცილებლობას ვერც FF – ში ვხედავდი მანამდე და სიმართლე ითქვას ვერც დღეს ვერ ვხედავ… თუმცა არც Mozilla – მ დააყოფნა და დღეს უკვე შემოგვთავაზა FF – ის დამატებების შექმნის ახალი მექანიზმი. კერძოდ კი Jetpak!

ციტატა პროექტის საიტიდან:

In short, Jetpack is an API for allowing you to write Firefox add-ons using the web technologies you already know.

რითია საინტერესო Jetpak? პირველ რიგში ისევე როგორც Crhome – ს შემთხვევაში, Jetpak – ის შემთხვევაშიც დამატების შესაქმნელად საკმარისია მხოლოდ HTML/CSS და JavaScript. ამ შემთხვევაშიც არავითარი XUL და რთული XML კონფიგურაციის ფაილები. ასევე არავიტარი ბრაუზერის გადატვირთვა დამატების ინსტალაციის შემდგომ და რაც ყველაზე ყველაზე ყველაზე მნიშვნელოვანია დეველოპმენტის პროცესში შეგვიძლია გამოვიყენოთ ნებისმიერი არსებული ინსტრუმენტული საშუალებები და Firebug დებაგირებისათვის რაც არსებულ მოდელში პრაქტიკულად შეუძლებელია. ასევე jQuery – ს მოყვარულთათვის ძალიან მნიშვნელოვანი ფაქტია რომ ეს ბიბლიოთეკა ნაგულისხმევად არის ჩადებული Jetpak – ში, რაც კიდევ უფრო გაამარტივებს დამატებების პროგრამირებას.

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

მარტივი XPath რეალიზაცია JavaScript – ში

იოსები — Mon, 14 May 2007 08:49:33 +0000

ვებ დოკუმენტის (ან მისი რომელიმე ნაწილის) კლიენტის მხარეს დამუშავებისას გარდაუვალია დოკუმენტის ელემენტებთან მუშაობა. დღესდღეობით დოკუმენტის ელემენტებთან მუშაობის ორი ყველაზე გავცელებული ე.წ. DOM ფუნქცია არსებობს ერთი ესენია: 1) document ობიექტის getElementById(“element-id”) მეთოდი რომელიც აბრუნებს ელემენტს მითითებული უნიკალური იდენტიფიკატორით (ელემენტის id ატრიბუტის მნიშვნელობა); 2) ელემენტის getElementsByTagName(“tagname”) მეთოდი რომელიც აბრუნებს ელემენტის ქვემდგომ იერარქიაში არსებულ ყველა “tagname” პარამეტრის შესაბამის ელემენტს.

აღნიშნული ორი მეთოდი საკმაოდ ეფექტურად მუშაობს მარტივ შემთხვევებში თუმცა არსებობს რამდენიმე უარყოფითი დეტალიც:

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

მსგავსი ტიპის ამოცანების უფრო მოქნილი ხერხებით გადასაჭრელად არსებობს სპეციალური ენა სახელად XPath. თავისთავად ამ ენის დანიშნულება მდგომარეობს იმაში რომ მარტივად მოვიპოვოთ ინფორმაცია XML დოკუმენტში არსებული რომელიმე ელემენტის შესახებ.

არსებობს თუ არა XPath – ის მხარდაჭერა თანამედროვე ბრაუზერებში? დიახ არსებობს… თუმცა თავსებადობა სხვადასხვა რეალიზაციებს შორის საკმაოდ უხარისხოა.

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

მაგალითად შემდეგი XML დოკუმენტიდან თუ გვსურს ამოვიღოთ “Ann Smith” – ის შესაბამისი sex ელემენტი, XPath გამოსახულებას ექნება ასეთი სახე: “/persons/person[1]/name” (person[1] – აქ იგულისხმება მეორე person ელემენტი რადგან ელემენტების ინდექსაცია იწყება 0 – იდან):


  
     John Doe
     M
  
  
     Ann Smith
     F

ამ მარტივი მაგალითიდან კარგად ჩანს თუ რამდენად მარტივია დოკუმენტთან მუშაობა XPath – ის მეშვეობით და რამდენი არასაჭირო კოდის დაწერა დაგვჭირდებოდა იგივე შედეგის მისაღწევად JavaScript – ის სტანდარტული DOM მეთოდების გამოყენებით.

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

მაგალითად თუ გვაქვს მსგავსი (X)HTML კოდი:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="test-id">
<ul>
<li>Menu Item One</li>
<li>Menu Item Two</li>
<li>
Menu Item Three
<ul>
<li>Sub Menu Item One</li>
<li>Sub Menu Item Two</li>
<li>Sub Menu Item Three</li>
</ul>
</li>
</ul>
</div>

და გვსურს რომ ამოვიღოთ ქვემენიუს “Sub Menu Item Two” ელემენტი გამოსახულებას ექნება ასეთი სახე: “#test-id/ul/li[2]/ul/li[1]“; გამოსახულება თავსითავად მარტივია თუმცა ზოგიერთ დეტალზე ღირს ყურადღების მიქცევა:

თუ გვსურს რომ მეთოდმა გადაცემული სტრიქონი მიიღოს XPath გამოსახულებად იგი აუცილებლად უნდა იწყებოდეს # სიმბოლოთო და კონკრეტული ელემენტის უნიკალური იდენტიფიკატორით (მაგ. #test-id);
ქველემენტების მიმართვა ხდება შემდეგნრაირად: /ul (სლეში და ელემენტის ტეგის სახელი) და იგულისხმება პირველივე მითითებული ტიპის ტეგი;
კონკრეტული ქველემენტის ამოღება ინდექსით განისაზღვრება შემდეგნაირად: li[2] (ელემენტის დასახელება და შესაბამისი ინდექსი, ამ შემთხვევაში იგულისხმება მესამე li ელემენტი);

თავისთავად ფუნქციის გამოიყურება შემდეგნაირად იგი პარამეტრად ღებულობს სტრიქონს, რომელიც არის ან უბრალოდ ელემენტის უნიკალური იდენტიფიკატორი ან XPath – ის მსგავსი გამოსახულება:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

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

ცოტა რამ (X)HTML დოკუმენტის სემანტიკის შესახებ

იოსები — Thu, 12 Apr 2007 13:37:30 +0000

სწორად აგებული ვებ დოკუმენტის უმთავრესი დეტალი სტრუქტურასა და ლოგიკასთან ერთად არის სემანტიკურად სწორი (X)HTML კოდი. რას ნიშნავს სემანტიკურად სწორი კოდი? პირველ რიგში თავად ამ სიტყვის განმარტება ლექსიკონის მიხედვით:

semantics |səˈmantiks|

plural noun [usu. treated as sing. ] the branch of linguistics and logic concerned with meaning. There are a number of branches and subbranches of semantics, including formal semantics, which studies the logical aspects of meaning, such as sense, reference, implication, and logical form, lexical semantics, which studies word meanings and word relations, and conceptual semantics, which studies the cognitive structure of meaning.
the meaning of a word, phrase, sentence, or text : such quibbling over semantics may seem petty stuff.

Google – ს მიერ შემოთავაზებული განმარტება:

Intended meaning. In computing, semantics is the assumed or explicit set of understandings used in a system to give meaning to data.

ყველასათვის კარგად ცნობილია (X)HTML ენა წარმოადგენს ტეგების კრებულს. ტეგების უდიდეს ნაწილს(თუმცა არა ყველას) გააჩნია სემანტიკური(აზრობრივი) დატვირთვა და სწორად ასეთი ტეგების გამოყენებით იქმნება სემანტიკურად სწორი დოკუმენტი. რას ნიშნავს ეს?

სემანტიკურად სწორი დოკუმენტი თავისთავად გულისხმობს რომ მისი ის ტექსტური ნაწილი რომელიც შეიცავს გარკვეულ ინფორმაციას უნდა იყოს შესაბამისი ტეგებით დამუშავებული. მაგალითად დოკუმენტში არსებული დასათაურებები(სათაურები, ქვესათაურები) უნდა იყვნენ მოთავსებული h1, h2 და ა.შ. ტეგებში. ჩამონათვალი უნდა გაკეთდეს შესაბამისად ul/li ან ol/li ტეგების კომბინაციით. ტექსტი პარაგრაფებად უნდა დაიყოს P ტეგების გამოყენებით და არა BR ან სხვა რომელიმე ტეგების გამოყენებით და ა.შ.

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

დასათაურებები – h1, h2, h3, h4, h5, h6 ელემენტები
პარაგრაფი – P ელემენტი
დატვირთვის(მნიშვნელობის) მინიჭება – em ელემენტი
უფრო მეტი დატვირთვის(მნიშვნელობის) მინიჭება – strong ელემენტი
აბრევიატურა – abbr ელემენტი
კოდი – code ელემენტი
ციტირება – cite ელემენტი
ციტირება – blockquote ელემენტი
ჩამონათვალი – ul, ol, li ელემენტები
განმარტებების ჩამონათვალი – dl, dt, dd ელემენტები

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

დასათაურებები – h1, h2, h3, h4, h5, h6 ელემენტები

დასათაურებები(Headings) როგორც მათი სახელი გვეუბნება გამოიყენება დოკუმენტის სხვადასხვა ნაწილების დასათაურებისათვის. ასეთი ტეგი სულ ექვსი ცალია რაზეც მიუთითებს ტეგების ინდექსები და განსაზღვრავს დასათაურების მნიშვნელობას(წონას). მაგალითად ამ პოსტის სათაური მოთავსებულია h1 ტეგში რაც მიუთითებს იმას რომ იგი ყველაზე მნიშვნელოვანია.

დოკუმენტის აგებისას სათაურებისა და ქვესათაურების გამოსაყოფად აუცილებლად უნდა გამოვიყენოთ ეს ტეგები. მაგალითად:

დოკუმენტის სათაური
დოკუმენტის ქვესათაური

პარაგრაფი(აბზაცი?) – P ელემენტი

ამ ელემენტის გამოყენება აუცილებელია ნებისმიერ დროს როდესაც ვმუშაობთ ტექსტებთან და დოკუმენტის რომელიმე ნაწილს ვყოფთ პარაგრაფებად(იმ შემთხვევაშიც კი როდესაც პარაგრაფების რაოდენობა არ აღემატება ერთს) სხვა რომელიმე ტეგის(მაგალითად div ან span) ამ მიზნით გამოყენება არასწორია რადგან P ტეგის გარდა არც ერთს არ გააჩნია მსგავსი სემანტიკური დატვირთვა. ასევე აღსანიშნავია რომ ახალი პარაგრაფის დასაწყებად არ არის რეკომენდირებული BR ტეგის გამოყენება.

მაგალითად შემდეგი კოდი სემანტიკურად გამართულია:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

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


	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
	


	Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat.

დატვირთვის(მნიშვნელობის) მინიჭება – em, strong ელემენტები

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

მაგალითად:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

უნდა აღინიშნოს რომ ხშირად ამ მიზნისთვის იყენებენ B და I ტეგებს, თუმცა მათ არ გააჩნიათ არავითარი სემანტიკური დატვირთვა და ასევე ეს ტეგები იქნება ამოღებული (X)HTML – ს მომავალი ვერსიებიდან.

em და strong ელემენტებმა შეიძლება გარკვეული პროტესტი გამოიწვიონ იმ მიზეზით რომ მათ აქვთ წინასწარ განსაზღვრული სტილი(em ტეგში მოთავსებული ტექსტი ბრაუზერში ჩანს დახრილი(italic) ხოლო strong ტეგში მოთავსებული ტექსტი კი გამუქებული(bold)) თუმცა არავითარი შეზღუდვა არ არსებობს იმისათვის რათა ეს წინასწარ განსაზღვრული სტილები შევცვალოთ CSS – ის მეშვეობით, და რაც მთავარია ამითი ელემენტის სემანტიკა არ იცვლება.

აბრევიატურა – abbr ელემენტი

ეს ტეგი გამოიყენება აბრევიატურებთან. მაგალითად RSS და CSS არის აბრევიატურები. შესაბამისად ასეთი ტიპის ტექსტისთვის სემანტიკური დატვირთვის მისანიჭებლად უნდა გამივყენოთ abbr ტეგი.

მაგალითად:

  RSS
  CSS

როგორც მაგალითიდან ჩანს abbr ტეგის title ატრიბუტი გამოიყენება აბრევიატურის სრული ტექსტის მისათითებლად.

ციტირება – cite ელემენტი

cite ელემენტი გამოიყენება ტექსტის ციტირებისა ან წყაროზე მისათითებლად.

     ცოტა რამ (X)HTML დოკუმენტის სემანტიკის შესახებ

ციტირება – blockquote ელემენტი

blockquote ელემენტი გამოიყენება დიდი მოცულობის ტექსტის ციტირებისათვის. აღსანიშნავია რომ განსხვავებით cite ელემენტისგან იგი არის ბლოკის ტიპის ელემენტი.

მაგალითად:


	Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ასევე საჭიროების შემთხვევაში სასურველია ამ ელემენტის cite და title ატრიბუტების გამოყენება, შესაბამისად cite ატრიბუტი გამოიყენება წყაროს მისამართის მისათითებლად, ხოლო title ატრიბუტი ტექსტის სათაურის(და ავტორის საჭიროების შემთხვევაში) მისათითებლად. მაგალითად:


	Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum

ჩამონათვალი – ul, ol, li ელემენტები

ამ ელემენტების კომბინაცია(კერძოდ: ul/li ან ol/li) უნდა გამოვიყენოთ ნებისმიერი ტიპის ჩამონათვალის გასაკეთებლად (განსაკუთრებით ხშირად გამოიყენება მენიუების ასაგებად). მაგალითად მარტივი ჩამონათვალის კოდი გამოიყურება ასე:


	Liste Item One
	Liste Item Two
	Liste Item Three

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


	Liste Item One
	

	Liste Item Two
	

	Liste Item Three

განმარტებების ჩამონათვალი – dl, dt, dd ელემენტები

გამოიყენება ნებისმიერი ტიპის განმარტებიბის ჩამონათვალის გასაკეთებლად. მაგალითად:


	CSS
	Cascading Style Sheets
	RSS
	Really Simple Syndication
	HTML
	Hypertext Markup Language

ასევე ამ ტეგების კომბინაციით ლოგიკურად შეიძლება ორი ადამიანის დილოგის გადმოცემა(საუკეთესო მაგალითია ჩატი). მაგალითად:


	სოსო:
	როგორ ხარ იკა?
	ირაკლი:
	კარგად, შენ?
	სოსო:
	მეც კარგად

ცოტა რამ (X)HTML – ს შესახებ

იოსები — Thu, 12 Apr 2007 12:12:54 +0000

(X)HTML დოკუმენტის სწორი ფორმირება და მისი სემანტიკა თანამედროვე ვების ერთერთი მთავარი და განუყოფელი დეტალია რომელიც რატომღაც 99% შემთხვევაში საერთოდ უგულებელყოფილია და არ ექცევა სათანადო ყურადღება.

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

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

1) ისტორიული მიზეზები

პირველი და ყველაზე საგულისხმო დეტალი თავად ვებისა და ვებ ბრაუზერების განვითარების ისტორიას უკავშირდება და ეს არის ერთერთი მთავარი გამომწვევი მიზეზი დოკუმენტის აგების არასწორი ჩვევებისა და ცოდნის ჩამოყალიბებისა. ეს მიზეზები ერთის მხრივ გამოწვეული იყო ცნობილი ბრაუზერების ომის დროს არ არსებული თავსებადობისა და სტანდარტების არასათანადო მხარდაჭერით, ხოლო მეორეს მხრივ კი სხვადასხვა ცნობილი ვიზუალური ვებ დოკუმენტების რედაქტორების(Adobe GoLive, Macromedia DreamViewer, MS FrontPage(განსაკუთრებული კატასტროფა) და ა.შ.) მიერ რომლებიც თავის მხრივ ამ არათავსებადობის დასაძლევად შესაბამის კოდს აგენერირებდნენ. ბრაუზერებს შორის არათავსებადობის, CSS – ის ან არასრული ან არასწორი მხარდაჭერა, ვიზუალური რედაქტორების მიერ დაგენერირებული არასწორი(იმ ეპოქის ბრაუზერების შესაბამისად) კოდი წლების მანძილზე გახდა მიზეზი იმისა რომ მსგავსი არასწორი ჩვევები და ცოდნა ჩამოუყალიბდა ვებ მასტერების უდიდეს ნაწილს.

2) არასწორი დამოკიდებულება (X)HTML – სა და CSS – ისადმი

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

Server Side დეველოპერები და პროგრამისტები
მათთვის ეს ტექნოლოგიები განსაკუთრებით “მარტივი” და “უმნიშვნელოა” თვლიან რომ მის შესწავლას არ სჭირდება განსაკუთრებული დროის დათმობა.

ვებ დიზაინერები
ეს კატეგორია განსაკუთრებით დიდ ყურადღებას იმსახურებს რადგან, დიზაინერების საკმაოდ დიდ ნაწილს საერთოდ არ აქვს წარმოდგენა ვებისა და ვებ დოკუმენტების შესახებ(აღარაფერს ვამბობ ზემოთხსენებულ ტექნოლოგიებზე) ხშირ შემთხვევაში მათ მიერ შესრულებული თუნდაც უმაღლესი ხარისხის დიზაინი შეუსაბამოა ვებთან, მაგრამ რაც ყველაზე უარესია უამრავ დიზაინერს(და არა მარტო მათ) მიაჩნიათ რომ (X)HTML – სა და CSS – ის ცოდნა მათ არ მოეთხოვებათ და ეს არ არის მათი საქმე.

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

სინამდვილეში არც (X)HTML და არც CSS არ მიეკუთვნებიან მარტივთა რიცხვს და საკმაოდ საფუძვლიან ცოდნას საჭიროებს ორივე ტექნოლოგია. იმის გათვალისწინებით რომ თავსებადობის საკითხები დღემდე საკმაოდ აქტუალურია და ბრაუზერების უდიდესი ნაწილი არ არის სტანდარტებთან თავსებადი 100% – ით.

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

ის არის (X)HTML დოკუმენტი რომელსაც უნდა გააჩნდეს სწორი და ლოგიკური სტრუქტურა;
უნდა იყოს ვალიდური;
უნდა იყოს სემანტიკურად სწორი რაც თავის მხრივ მიიღწევა შესაბამისი ტეგების სათანადო გამოყენებით.
ვებ დოკუმენტი არ არის(და არ უნდა განიხილებოდეს) როგორც საბოლოო ვიზუალური შედეგი რომელსაც შეიძლება მივაღწიოთ ნებისმირი გზით.
მისი ნახვა უნდა შეიძლებოდეს ნებისმიერი ტიპის ბრაუზერით(ტექსტური ბრაუზერების ჩათვლით)
დოკუმენტის ვიზუალური დეტალები მთლიანად უნდა იყოს დამუშავებული CSS – ის მეშვეობით.
დოკუმენტის ლოგიკური სტრუქტურა არ უნდა ირღვეოდეს იმ შემთხვევაში თუ ბროუზერს საერთოდ არ გააჩნია(ან გათიშული აქვს) CSS – ისა და JavaScript – ის მხარდაჭერა.

ამ დეტალების გათვალისწინებით მე პირადად მებადება შეკითხვები რომელიც უკავშირდება ისევ და ისევ: (X)HTML და CSS კოდერების, ვებ მასტერების, ვებ დიზაინერების და ServerSide დეველოპერების ერთობლივ მუშაობას კონკრეტულ პროექტებზე(მასშტაბებს არანაირი მნიშვნელობა არ აქვს), ჩამოთვლილი კატეგორიებიდან რომელმა უნდა იცოდეს ყველა ეს დეტალი?

ჩემის აზრით CSS-ისა და JavaScript – ის ცოდნა არ არის სავალდებულო ყველასთვის, მაგრამ რაც შეეხება (X)HTML – ს, დოკუმენტის სტრუქტურასა და სემანტიკას სავალდებულოა ყველა ჩამოთვლილი კატეგორიისათვის რადგან:

(X)HTML – ს სათანადო შესწავლა ტექნიკუირად არც შეუძლებელია და არც სათაკილო, უფრო მეტიც საკმაოდ საინტერესოა.
ვალიდური დოკუმენტის აგება ცოდნის, გამოცდილებისა და უბრალოდ დროის საკითხია.
სემანტიკურად სწორი დოკუმენტის აგებაც ასევე ცოდნის გამოცდილებისა და დროის საკითხია.

თუ რა საჭიროა ეს სავსებით თავისუფლად შესაძლებელია დავასაბუთოთ ServerSide დეველოპერის მაგალითზე.

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

თუ განვიხილავთ ისეთ შემთხვევას როდესაც კომპანია ორიენტირებულია სტანდარტებზე დაფუძვნებული ვებ პროდუქტბის შექმნაზე და ამ კომპანიის რომელიმე ServerSide დეველოპერს ევალება სათანადო კომპონენტების შექმნა, რა მოხდება იმ შემთხვევაში თუ მან სათანადოდ არ იცის (X)HTML, არ აქვს წარმოდგენა ზოგადად დოკუმენტის სტრუქტურასა და აღარაფერს ვამბობ დოკუმენტის სემანტიკაზე?

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

რატომ? ამისათვის უამრავი არგუმენტი შეგვიძლია მოვიყვანოთ, მაგრამ საკმარისია თუ ვიტყვით რომ თუ კომპანიაში არსებობს რამდენიმე ServerSide დეველოპერი რომელიც ასრულებს აღნიშნულ სამუშაოს და ასრულებს იგივე “ხარისხით” და მიდგომით რომ (X)HTML არ არის მათი საქმე და თვლიან რომ საკმარისია მათმა შექმნილმა კომპონენტებმა დააგენერირონ რაიმე საბოლოო ვიზუალური რეზულტატი, გამოდის რომ ამით გარდა იმისა რომ მისაღები პროდუქტის საბოლოო ხარისხი ფუჭდება ასევე მსგავსი პრობლემების აღმოსაფხვრელად იკარგება დამატებითი დრო, ჩნდება დამატებითი დაბრკოლება (X)HTML და CSS კოდერებისათვის რაც თავის მხრივ იწვევს დამატებითი დროით დანახარჯებსა და ასევე აზრთა კონფლიქტს.

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

table ელემენტის სასარგებლო დეტალები

იოსები — Sat, 17 Mar 2007 08:01:09 +0000

table ელემენტი ბევრად უფრო სასარგებლო და მოქნილი აღმოჩნდა ვიდრე პირადად მე მეგონა. ერთერთ პოსტში ვისაუბრე thead, tfoot და tbody ტეგებზე, თუმცა ამჯერად table ელემენტის სხვა დეტალებზე შევაჩერებ ყურადღებას, კერძოდ: caption, colgroup, col და tbody ელემენტის გამოყენებაზე.

სადავო არ არის ის საკითხი რომ მონაცემების ასახვისათვის table საუკეთესო საშუალებაა… თუმცა ამ ელემენტის სრულფასოვანი გამოყენების მაგალითები არცთუ ხშირად მინახავს. მაგალითისათვის მინდა განვიხილო ქვემოთ ნაჩვენები ცხრილი რომლის აგებაც ბევრად მარტივი აღმოჩნდა საჭირო დეტალების გამოყენებით ვიდრე ეს სხვა დროს გამომდიოდა.

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

Table: This is table caption
Col one	Col two	Col three	Col four
Some useful information
Col one data	Col two data	Col tdree data	Col four data
Col one data	Col two data	Col tdree data	Col four data
Col one data	Col two data	Col tdree data	Col four data
Col one data	Col two data	Col tdree data	Col four data

ქვემოთ მოყვანილია ამ ცხრილის ასაგებად გამოყენებული HTML კოდი:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<table id="data-table">
<caption>Table: This is table caption</caption>
<thead>
<tr>
<th>Col one</th>
<th>Col two</th>
<th>Col three</th>
<th>Col four</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4"><em>Some useful information</em></td>
</tr>
</tfoot>
<colgroup>
<col span="2" width="15%" />
<col width="45%" />
<col width="25%" />
</colgroup>
<tbody id="tbody-one">
<tr>
<td>Col one data</td>
<td>Col two data</td>
<td>Col tdree data</td>
<td>Col four data</td>
</tr>
</tbody>
<tbody id="tbody-two">
<tr>
<td>Col one data</td>
<td>Col two data</td>
<td>Col tdree data</td>
<td>Col four data</td>
</tr>
<tr>
<td>Col one data</td>
<td>Col two data</td>
<td>Col tdree data</td>
<td>Col four data</td>
</tr>
</tbody>
<tbody id="tbody-three">
<tr>
<td>Col one data</td>
<td>Col two data</td>
<td>Col tdree data</td>
<td>Col four data</td>
</tr>
</tbody>
</table>

დეტალურად განვიხილოთ მოცემული HTML კოდი.

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

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

THEAD, TFOOT და TBODY ელემენტები:
ეს ელემენტები გამოიყენება სტრიქონების დასაჯგუფებლად(Row groups). სპეციფიკაციის თანახმად საჭიროების შემთხვევაში ცხრილის სტრიქონები შეიძლება დავაჯგუფოთ ამ ელემენტებში და ცხრილი შეიძლება შედგებოდეს თითო თითო thead და tfoot და ერთი ან რამდენიმე tbody ელემენტებისაგან. შესაბამისად thead და tfoot ელემენტები უნდა შეიცავდნენ ინფორმაციას სვეტების შესახებ, ხოლო tbody ელემენტში უნდა დავაჯგუფოთ სტრიქონები რომლებიც უშუალოდ შეიცავენ ტაბულარულ მონაცემებს.

აღსანიშნავია რომ tfoot ელემენტი უნდა განვათავსოთ tbody ელემენტებამდე(როგორც ნაჩვენებია მაგალითში) რათა ბროუზერებმა შეძლოთ ამ ელემენტის გამობეჭდვა მანამდე სანამ tbody ელემენტების შესავსებად განკუთვნილი მონაცემები სრულად ჩამოიტვირთება სერვერიდან.

აღსანიშნავია და ღირს ყურადღების მიქცევა იმ ფაქტზე რომ tbody ელემენტი შეგვიძლია გამოვიყენოთ რამდენიმეჯერ, ეს განსაკუთრებით მნიშვნელოვანია ორ თვალსაზრისით: ერთის მხრივ თვითონ tbody ელემენტი შეიძლება იყოს ე.წ. scrollable დამოუკიდებლად thead და tfoot ელემენტებისგან(იხილეთ ოფიციალური ტესტ კეისი, თუმცა მხოლოდ მოზილაში მუშაობს უახლეს IE7 – ში არ მუშაობს), ხოლო მეორეს მხრივ ტაბულარული მონაცემების დაჯგუფება ბევრად უფრო ლოგიკურად შეიძლება რამდენიმე tbody ელემენტში და სხვადასხვა თუმცა ურთიერთდაკავშირებულ მონაცმებებთან დამოუკიდებლად მუშაობის ბევრად უფრო მოქნილი და ბუნებრივი გზა ჩნდება.

COLGROUP და COL ელემენტები:
ამ ელემენტების გამოიყენებით შესაძლებელი სვეტების დაჯგუფება და დამატებითი სტრუქტურული წესების განსაზღვრა მათთვის.

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

#data-table, #data-table th, #data-table td {
border: 1px solid black;
}

#data-table caption {
text-align: left;
background-color: silver;
}

#data-table #tbody-one tr {
background-color: lightblue;
}

#data-table #tbody-two tr {
background-color: pink;
}

#data-table #tbody-three tr {
background-color: green;
}

#data-table tfoot tr td {
text-align: right;
background-color: orange;
}

უფრო მეტი დეტალებისათვის შეგიძლიათ იხილოთ w3c – ს ოფიციალური დოკუმენტი.

CSS rollover ეფექტი JavaScript – ის გარეშე

იოსები — Mon, 12 Mar 2007 10:41:32 +0000

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

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

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

ქვემოთ ნაჩვენები მარტივი მენიუ მთლიანად გაკეთებულია CSS და XHTML კოდის მეშვეობით და იგი არ იყენებს JavaScript – ს.

ამ მარტივ მაგალითში მენიუს რომელიმე ელემენტზე მაუსის ისრის მიტანის დროს ხდება რამდენიმე ცვლილება:

იცვლება ელემენტის ფონის ფერი
იცვლება ტექსტის ფერი
იცვლება მარჯვენა გვერდის ფერი

მენიუს HTML კოდი შედგება სულ რამდენიმე სტრიქონისგან:

1
2
3
4
5
6
7

<div id="menu">
<ul>
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three</a></li>
</ul>
</div>

კოდიდან ცხადად ჩანს რომ მასში არ არის გამოყენებული არც ერთი მოვლენა (event), JavaScript – ით იგივე ეფექტის მიღების შემთხვევაში ყველა a ელემენტისთვის საჭირო იქნებოდა onmouseover და onmouseout მოვლენების გამოყენება. ამ შემთხვევაში კი ყველა ცვლილება ხორციელდება მხოლოდ CSS კოდით რომელიც ნაჩვენებია ქვემოთ.

მენიუს CSS კოდს აქვს შემდეგი სახე:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

#menu ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
#menu a {
display: block;
width: 150px;
background-color: lightblue;
color: blue;
border-bottom: 1px solid gray;
border-right: 5px solid silver;
text-decoration: none;
padding: 2px;
}
#menu a:hover {
background-color: pink;
border-right: 5px solid orange;
color: red;
}

მოცემულ მაგალითში სასურველი ეფექტის მისაღწევად გამოიყენება a ელემენტის hover ფსევდო კლასი, რომელიც გვაძლევს იმის საშუალებას რომ menu იდენტიფიკატორის მქონე div ელემენტის შიგნით არსებულ ყველა a ელემენტზე მაუსის ისრის მიტანის დროს განვახორციელოთ სხვადასხვა ცვლილება. ამ შემთხვევაში როგოც ზემოთ იყო აღნიშნული იცვლება მხოლოდ ფონი, მარჯვენა გვერდის ფერი და ტექსტის ფერი.

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

1
2
3
4
5
6

#menu a:hover {
background-image: url("hoverimage.gif");
background-repeat: no-repeat;
border-right: 5px solid orange;
color: red;
}

ასეთ შემთხვევაში (იგულისხმება რომ სურათი სახელად hoverimage.gif არსებობს) ელემენტს მიენიჭება ახალი ფონის სურათი… თუმცა ეს არ არის ყველაფერი, მაგალითად წარმოვიდგინოთ შემთხვევა როდესაც მენიუს ელემენტზე მაუსის ისრის მიტანის დროს უნდა გამოჩნდეს რაიმე დამალული ელემენტი როგორც ნაჩვენებია შემდეგ მაგალითში:

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

როგორ მიიღწევა ეს ეფექტი? პირველ რიგში მცირე ცვლილება HTML კოდში:

1
2
3
4
5
6
7

<div id="menu">
<ul>
<li><a href="#">Item One<span> Info One</span></a></li>
<li><a href="#">Item Two<span> Info Two</span></a></li>
<li><a href="#">Item Three<span> Info Three</span></a></li>
</ul>
</div>

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

ასევე მცირე ცვლილება განხორციელდა CSS კოდში, მას დაემატა შემდეგი დირექტივები:

1
2
3
4
5
6
7
8
9

#menu a span {
display: none;
}

#menu a:hover span {
display: inline;
font-weight: bold;
color: green;
}

განვიხილოთ თითოეული მათგანი.

#menu a span – ის მეშვეობით უბრალოდ ვმალავთ a ელემენტების შიგნით არსებულ span ტეგებს.

#menu a:hover span – ის მეშვეობით კი პირიქით, ვაჩენთ span ტეგს CSS display თვისების მეშვეობით.

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

1
2
3
4

#menu ul li {
display: inline-block;
float: left;
}

ვერტიკალურის ნაცვლად მივიღებთ ჰორიზონტალურ მენიუს.

, & რა საჭიროა ეს სამი ტეგი?

იოსები — Sun, 25 Feb 2007 02:00:29 +0000

რა საჭიროა ეს სამი ტეგი? შეიძლება თუ არა გამოვიყენოთ რამეში? ეს და სხვა მსგავსი შეკითხვები მაწუხებდა მუდმივად სადაც კი ამ ტეგებს მოვკრავდი თვალს… თუმცა დიდ მნიშვნელობას არასოდეს არ ვანიჭებდი მათ არსებობას… ერთადერთი როდესაც ინტენსიურად დავიწყე JavaScript DOM API-ს გამოყენება აღმოჩნდა რომ თუ სკრიპტი სრულდებოდა IE-ში, ხოლო მისი მეშვეობით არსებულ ცხრილში გვინდოდა ახალი სტრიქონის (tr) დამატება დინამიურად, ტეგის გარეშე ეს სკრიპტი არ მუშაობდა… მაგ მომენტიდან მივეჩვიე ამ ტეგის გამოყენებას ცხრილებში, თუმცა thead და tfoot არასოდეს არ გამომიყენებია…

საერთოდ რატომ უნდა გამოვიყენოთ ცხრილი? ბევრი web 2.0 ენთუზიასტი ბევრს კამათობს ამაზე და არც მე ვარ გამონაკლისი… თუმცა არის შემთხვევები როდესაც ცხრილების გამოყენება გარდაუვალია, და ასეთი შემთხვევა არც თუ იშვიათია. რაც შეეხება იმას რომ ცხრილი არ გამოვიყენოთ საერთოდ მე პირადად უზარმაზარ სისულელედ მიმაჩნია და არგუმენტად ისიც კმარა ჩემთვის რომ Google და Yahoo საჭიროების მიხედვით თამამად და წარმატებულად იყენებენ ცხრილებს. თუმცა ეს სხვა თემაა და ჯობია დავუბრუნდე მთავარ საკითხს…

გარკვეული პერიოდის წინ, კონკრეტულ ამოცანაზე მუშაობისას საჭირო აღმოჩნდა ისეთი ცხრილის გაკეთება რომელსაც ექნებოდა head, თავისთავად body და footer. ცხრილის სამივე ნაწილს ტავის დანიშნულება აქვს რაც მათი დასახელებებიდან ჩანს რაც HTML – ში ავსახეთ შემდეგნაირად:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<table id="grid">
<tbody id="gridbody">

<tr class="table_header">
<th>Column One</th>
<th>Column Two</th>
</tr>

<tr class="table_row">
<td>Cell Data One</td>
<td>Cell Data Two</td>
</tr>

<tr class="table_footer">
<td colspan="2"><input type="button" onclick="addDynamicRow()" name="add_row" value="Add dynamic row" /></td>
</tr>

</tbody>
</table>

როგორც ცხრილის კომენტარებიდან ჩანს, ყველაფერი თავმოყრილი იყო tbody ტეგს შიგნით და ცხრილის header, მონაცემების სტრიქონებსა და ცხრილის footer – ს შორის განსხვავება გამოიხატებოდა მხოლოდ მათ კომენტარებსა და class ატრიბუტის მნიშვნელობებით. ცხრილის ბოლო სტრიქონში განთავსებული ღილაკის მეშვეობით ცხრილს უნდა დამატებოდა ახალი სტრიქონი.

ერთი შეხედვით ყველაფერი “იდეალურად” და “ლოგიკურად” მეჩვენა მაგრამ ამოცანაში ნათქვამი იყო რომ გარკვეული შემთხვევების მიხედვით ცხრილს ახალი სტრიქონი დაემატებოდა ან დასაწყისში(prepend) ან ბოლოში(append) თუმცა ამას დიდი მნიშვნელობა არ მივანიჭე თავიდან. დაიწერა შესაბამისი JavaScript კოდი რომელიც ამ ამოცანას ასრულდებდა… მაგრამ არა ისე როგორც ეს მე მსურდა. აღმოჩნდა რომ თუ სტირქონს დავამატებდი თავში იგი აღმოჩნდებოდა ცხრილის დასაწყისში მაგრამ თვითონ სვეტების დასახელებამდე… ბოლოში დამატების შემთხვევაში კი “footer”-მდე რაც რა თქმა უნდა არასწორი იყო.

პირველად ვიფიქრე რომ სკრიპტისთვის დამემატებინა დამატებითი ლოგიკა რომელიც დინამიურ სტრიქონს დაამატებდა ერთ შემთხვევაში პირველი სტრიქონის შემდეგ, ხოლო მეორე შემთხვევაში ბოლო სტრიქონის წინ… ეს აზრი თავიდანვე არ მომეწონა და არაბუნებრივად მეჩვენა, რატომ უნდა ეთვალა სკრიპტს რომელი იყო პირველი და რომელი იყო ბოლო სტრიქონი.. თუ რთული შემთხვევა იქნებოდა და footer არა ერთი არამედ რამდენიმე სტრიქონისგან იქნებოდა შედგენილი? ან პირიქით header იქნებოდა ასეთი? ფიქრის და წვალების მერე როგორც იქნა მივხვდი რომ თუ ვიყენებდი tbody ტეგს რატომ არ უნდა გამომეყენებინა thead ტეგი? ვცადე და append-ის შემთხვევაში შედეგი მიღწეული აღმოჩნდა, თუმცა footer – ის პრობლემა ისევ მოუგვარებელი რჩებოდა სწორედ ამ დროს გამახსენდა tfoot ტეგის არსებობის შესახებ გამოვიყენე ეს ტეგიც და ამ შემთხვევაშიც გამიმართლდა მოლოდინი. მაგრამ რამაც ყველაზე მეტად გამახარა ასეთი კოდი აბსოლუტურად XHTML valid აღმოჩნდა. ცხრილმა კი მიიღო ასეთი სახე:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<table id="grid">

<thead>
<tr class="table_header">
<th>Column One</th>
<th>Column Two</th>
</tr>
</thead>

<tfoot>
<tr class="table_footer">
<td colspan="2"><input type="button" onclick="addDynamicRow()" name="add_row" value="Add dynamic row" /></td>
</tr>
</tfoot>

<tbody id="gridbody">
<tr class="table_row">
<td>Cell Data One</td>
<td>Cell Data Two</td>
</tr>
</tbody>

</table>

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