File input ველი html-ში

ბლოგზე მაინც დავწერო რამე, გულს გადავაყოლებ..

ყველაზე ბოლოს რაც მახსოვს, html file input-ის ღილაკზე მინდოდა სტილის დადება (არ მითხრათ flash-ით გექნაო :D)

ნუ, თურმე, რაც არ უნდა თავი მოიკლას კაცმა, მაგ ღილაკს სტილს ვერ შეუცვლის.. ვერც ტექსტს (choose file…). ამ ტექსტს ბრაუზერი სვამს და თან სხვადასხვა ბრაუზერში სხვადასხვაა ხოლმე.

გუგლმა რაღაც ჰაკებამდე მიმიყვანა.. ხალხი css-ით და javascript-ით აღწევს იმას, რომ ამ file input-ს გამჭვირვალეს ასვამს თავზე ჩვეულებრივ ღილაკს და input ველს (ანუ fileinput ზევიდანაა).

და მერე ჯავასკრიპტით იღებს ფაილის სახელს..

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

<button type="submit" id="fake-btn" onclick="document.getElementById('real').click();"> ატვირთვა</button>
<input type="text" id="filename_in"/>
<input type="file" id="real" style="display:none" value="some" onchange="document.getElementById('filename_in').value = this.value;"/>

ანუ, ვმალავ ნამდვილ ამტვირთავ ინფუთს, მაქვს ჩემი ღილაკი და ტექსტური ინფუთი და როცა ვინმე დააჭერს ჩემს ღილაკზე, ვაჭერინებ დამალულზეც click() მეთოდით. ხოლო მერე რა value-საც მიიღებს დამალული ელემენტი , ის გამომაქვს ჩემს ტექსტურ ინფუთში (onchange ივენტის საშუალებით).

მაგრამ მერე გამოჩნდა რატომაც არ გამოდიოდა ესე მარტივად. მოზილას და ოპერას click() მეთოდი (რომლითაც პროგრამულად ვაკეთებთ ელემენტზე მაუსის დაჭერის შემცვლელ მოქმედებას) არ აქვთ file input-ისთვისთვის.. გამონაკლისია ეს. ალბათ უსაფრთხოების მხრივ, მაგრამ რა დიდი ზარალი ეგ არის, ერთი ფაილ დიალოგი გამოვიდეს და მორჩა.. მოკლედ არ ვიცი რატომ არ აქვთ 😀 მაგრამ ფაქტია.. და კიდევ არც onchange ივენთი არ ესმით მაგისთვის.

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

ყოველი შემთხვევისთვის ერთ-ერთი გავრცელებული გზა ეს არის: Quirksmode.org

ისე კარგი ამბავიც არის – html5-ში multiple file ამტვირთავი იქნება ეს ელემენტი. ახლა ეს შესაძლებლობა არ აქვს და flash-ის uploader-ებს იყენებენ ხოლმე.

რომ დავფიქრდი, მგონი ყველაზე მეტი ამ ელემენტმა მაწვალა 😀 მე კიდევ jquery-ის ვაწვალებდი. აი მაგალითად აჯაქს რიქვესთით კი ვერ ატვირთავთ სურათს 😀 აუცილებლად უნდა გადავიდეს საბმიტის გვერდზე. jquery.post-ით ფორმის მონაცემებს რომ ვგზავნით, არ იგზავნება ეს. არც jQuery-ის serialize() ფუნქცია მოქმედებს მაგაზე, ფორმის სერიალიზებას როცა ვაკეთებთ..

გამოსავალი iframe ელემენტია ან ისევ flash uploader-ი.

და ბოლოს, რომ გამოვკეთდები ეს პოსტი რომ არ წავშალო, სიმღერასაც დავამატებ… : D i love it

Polling და Pushing აჯაქსით

მივადექი საიტის შეტყობინებების (notifications) ნაწილს და ბლოგი ძალიან რომ არ მივივიწყო, ნანახის მიმოხილვას აქ გავაკეთებ 😀

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

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

ამ ამოცანის გადასაჭრელად ძირითადად ორ გზას იყენებენ ხოლმე:

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

2. ბრაუზერი მიმართავს სერვერს და ამის შემდეგ კავშირს არც ერთი მხარე არ ხურავს. HTTP ქონექშენი ღიაა. თუ სერვერზე რამე ახალი მოხდება, სტრიმის სახით გაუშვებს ინფორმაციას კლიენტთან ამ კავშირით. ეს push-ია.

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

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

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

გადატვირთვის თავიდან ასაცილებლად IE 6/7 -ში შეზღუდვაც კია დაუხურავ კავშირებზე. ამ ბრაუზერში კლიენტს არ შეუძლია ქონდეს ორზე მეტი ღია ქონექშენი სერვერთან. ანუ მაგალითად, თუ ორ ტაბში გვაქვს გახსნილი ერთი და იგივე საიტი, რომელიც ასეთ დაუხურავ კავშირს იყენებს და მესამე ტაბშიც გავხსნით, მესამე აღარ ჩაიტვირთება.

ამისთვის ჰეკები არსებობს რა თქმა უნდა. სხვა მნიშვნელოვან ბრაუზერებს ამის პრობლემა არ ქონიათ.

გასათვალისწინებელია გახსნილი ქონექშენის სტრიმის გამაჩერებლებიც – ეს შეიძლება იყოს პროქსი სერვერები, სხვადასხვა firewall-ები ან ვებ სერვერი.. მაგალითად აპაჩის mod_jk კონექტორი (ტომკეტისთვის) ხელს უშლის თურმე push-ის რეალიზაციას.

იმ ბრაუზერებისთვის, რომლებსაც ნამდვილი push-ის გაკეთებაზე ბევრი პრობლემა აქვთ, არის კიდევ ერთი მეთოდი – long polling. აქ push-იც გვაქვს და poll-იც. ბრაუზერი გზავნის მოთხოვნას სერვერთან და თუ მეორე მხარეს მისთვის ჯერ არაფერი არ არის, სერვერი არ პასუხობს და ქონექშენს ღიას ტოვებს, ხოლო როცა რამე გამოჩნდება, ნაკადად კი არ უშვებს არამედ მთელ პასუხს უგზავნის უკან და ხურავს კიდეც. შემდეგ კლიენტი ისევ თავიდან გზავნის მოთხოვნას და ასე შემდეგ.

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

თუმცა რა თქმა უნდა ამოცანას გააჩნია. Push , რომლის პატერნს Comet-საც ეძახიან გამოიყენება GMail-ში, GMail-ის ჩატში, GDocs-ში, Meebo-სა და სხვა ჩატის თუ collaborate რედაქტირების საიტებში.

პ.ს. long polling-ის თავიდან ასაცილებლად და სულ ღია კავშირების ხარჯზე ინფორმაციის მიმოცვლისთვის HTML 5-ის სპეციფიკაციაში შემოაქვთ WebSocket კლასი, რომლითაც ასეთი პატერნის რეალიზაციაა შესაძლებელი. http://dev.w3.org/html5/websockets/

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

რეკომენდირებული საყურებელი:

Interactive Websites with Comet and DWR  by Joe Walker

პოსტერის დიზაინის კონკურსი. პრიზი – ვაკომის პლანშეტი

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

შესაქმნელია www.freelancereview.net საიტის პრომო პლაკატი.

კონკურსის აღწერა, პირობები და პრიზები იხილეთ აქ:
http://99designs.com/contests/34680/brief

კიდევ ერთი ლოდინი დასრულდა…

ბლა ბლა ბლა მიზეზების გამო ბოლო ერთი თვე გზაში იყო და ახლახანს ჩამოვა ჩემთან ის რაღაცა, რაზეც 9 თვის წინ მქონდა პოსტი (Gadgets from my wishlist). მაშინაც და შეძენამდე ერთი დღით ადრეც არ ვფიქრობდი რომ მაგას ავირჩევდი.. მაგრამ ბოლოს გადავწყვიტე რომ არც თუ ბევრი რამ მინდა.. უფრო სწორედ არაფერი მინდა ამდენი ხნის განმავლობაში (ამის გამოკლებით) და გამოვიწერე Wacom Cintiq 12wx.

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

ფანქარს 1024 დაჭერის (pressure) დონე აქვს და ამის გამო ძალიან გავს ნამდვილს. ერთადერთი ხმა არ აქვს 😀 ხატვის დროს..  არც დაყოვნების დროს შეამჩნევთ. ეკრანზეც ზუსტად იმ დროს დადის კურსორი, რა დროსაც ფიზიკურად ფანქარი.

ზედ არსებული shortcut ღილაკები ყველანაირად ხელს უწყობენ მომხმარებელს, რომ კომპიუტერის კლავიატურაზე არ მოუწიოთ ხელის გადაყოფა 😀

პლანშეტის ეკრანი ცალკე მონიტორად უერთდება კომპიუტერს და უფრო დიდი სივრცეა ^^

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

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

wacom-copy

p.s. სურათს ხვალ დღის სინათლეზე გადავუღებ 🙂

კოდის წერის სიჩქარის მნიშვნელოვნად გაუმჯობესება

არა მარტო კოდის 🙂

ალბათ უმეტესი თქვენგანი უკვე იყენებს მას ან მის ალტერნატივას. ზოგიერთ IDE-ს ჩადგმული აქვს მისი შესაძლებლობები.

მე კი მხოლოდ დღეს ვნახე Nettuts+ საიტზე და უკვე შემიყვარდა. ლაპარაკია Texter პროგრამაზე.

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

არა მარტო ტექსტს ვაბამთ. შესაძლებელია მაკროსების წერაც. მაგალითად, თუ წინადადების ბოლოს გაგვახსენდა, რომ წინადადება <p></p> პარაგრაფის ტეგებში უნდა ჩაგვესვა, Texter-ს შეუძლია ისევ რაღაც წინასწარ განსაზღვრული shortcut-ით ეს ტეგები ჩაუსვას, თუ ამ shortcuts განვსაზღვრავთ მაკროსით: {HOME}<p> {END}</p>

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

Hotstring-ის დამატება Texter-ში
Hotstring-ის დამატება Texter-ში

როგორც ჩანს LifeHacker-ის Texter-ის გარდა კიდევ არსებობს მისი მსგავსი პროგრამები, მაგრამ მე უკეთესი ვერ შევარჩიე. ამას კი ჯერჯერობით რაც ვუპოვე ერთადერთი ნაკლი უნიკოდია. არა მარტო ის, რომ უნიკოდი თვითონ პროგრამას არ ესმის, არამედ ხელსაც მიშლის, როცა სხვაგან ვწერ ქართულად და პროგრამის გათიშვა მიწევს.. მიუხედავად ამისა მაინც საშინლად მოსახერხებელია 😀