რჩევები საიტის ოპტიმიზაციისთვის (Front end)

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

ახლა ქრომი მაჩვენებს, რომ ჯეოლიმპის ერთ-ერთი მთავარი გვერდის გახსნის დროს სერვერზე 42 მოთხოვნა იგზავნება, 307.9 კილობაიტი იტვირთება და 1.2 – 2.3 წამს ანდომებს გვერდის ჩატვირთვას. შევეცდები ამის გაუმჯობესებას..

1. ნაკლები რაოდენობის HTTP მოთხოვნის გაგზავნა სერვერზე
ერთ-ერთი ყველაზე მნიშვნელოვანი წესი, რომელსაც შესამჩნევი შედეგი აქვს, სერვერზე გასაგზავნი HTTP მოთხოვნების შემცირებაა. ეს მოთხოვნები იგზავნება თვითონ html ფაილის და ასევე თითოეული კომპონენტის წამოსაღებად, რასაც საიტი შეიცავს (სურათები, css და javascript ფაილები, ა.შ.).

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

Continue reading

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-ისთვისთვის.. გამონაკლისია ეს. ალბათ უსაფრთხოების მხრივ, მაგრამ რა დიდი ზარალი ეგ არის, ერთი ფაილ დიალოგი გამოვიდეს და მორჩა.. მოკლედ არ ვიცი რატომ არ აქვთ :D მაგრამ ფაქტია.. და კიდევ არც onchange ივენთი არ ესმით მაგისთვის.

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

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

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

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

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

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


CSS და ტექსტის ზომა

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

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

ახლა თქვენთან ერთად გავარკვევ : )

ზოგადი მიმოხილვა

ფარდობითი ერთეულები

em
% – პროცენტი
ex – ამ ერთეულს ‘x-height’-ს ეძახიან, 1ex დაახლოებით პატარა x-ის სიმაღლის ტოლია.  სიდიდე განსაზღვრულია იმ ფონტებისთვისაც, რომლებიც საერთოდ არ შეიცავენ x-ს.

ფიქსირებული ერთეულები

px – პიქსელი
mm – მილიმეტრი
cm – სანტიმეტრი
in – დიუმი (= 2.54სმ)
pt – point. CSS 2.1-მიხედვით ის დიუმის 1/72 ნაწილს უდრის.
pc – pica. 1 pica = 12 points

სტილის წერის დროს კიდევ გვხვდება ზომები xx-small, x-small, small, medium, large, x-large, და xx-large. ასევე smaller და larger. ბოლო ორი ფარდობითია მშობელი ელემენტის ზომის მიმართ. წინებს კი ზუსტად არ ვიცი რა ზომები შეესაბამება პიქსელებში, თუმცა სხვადასხვა ბრაუზერებში საკმაოდ სტაბილურად აჩვენებენ.

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

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

font-size-1

რატომ არ უნდა გამოვიყენოთ px?

IE არ მისცემს მომხმარებელს ასეთი ფონტის ზომის შეცვლას, რაც მოუხერხებელია. იგივე ეხება სხვა ფიქსირებულ ერთეულებს (mm, cm, in ა.შ.).

რატომ არ უნდა გამოვიყენოთ ex?

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

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

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

და ბოლოს em

‘medium’ ზომის ტექსტი ბრაუზერებში default-ად 16px-ის ტოლია და ხანდახან რთული გამოსათვლელია ხოლმე აქედან em სიდიდე (იხ. ცხრილი).

ვებ დეველოპერებმა იპოვეს გზა ამ გამოთვლების გასამარტივებლად. მთელი საიტის ფონტის ზომას (body ელემენტში) ანიჭებენ ხოლმე 62.5%-ს. და ამის მერე 1em = 10px (რადგან em ფარდობითი გამოდის უკვე body-ის მიმართ). ასე რომ ნაცნობი პიქსელებიდან მარტივად შეგვიძლია გადავიყვანოთ em-ში 10-ზე გაყოფით.

აქვე გასათვალისწინებელია, რომ ეს ფარდობითობა მისდევს ელემენტების მთელს იერარქიას :D შვილს, მერე კიდევ იმის შვილს.. და ა.შ. ამიტომ კარგი იქნება რაც შეიძლება ნაკლები რაოდენობით თუ აღვწერთ font-size თვისებას. ისიც იერარქიების თავში.

არის კიდევ ერთი პატარა საკითხი : )

ბრაუზერები.

ბრაუზერებს აქვთ გვერდის ზომის და ფონტის ზომის რეგულირების შესაძლებლობა (თუმცა ქრომში ფონტის ზუმი ვერ ვიპოვე, მას მერე რაც მთელი გვერდის ზუმი ჩასვეს). უმრავლესობას (Google Chrome, Firefox, Opera, IE 7-8 …) default-ად აქვს მთელი გვერდის ზუმი.

რა განსხვავებაა?

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

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

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

ისევ და ისევ, ეს IE-ს ძველ ვერსიებს ეხება, თორემ, მაგალითად, Firefox-ში ვერანაირად ვერ გააჩერებთ ფონტს ერთ ზომაზე. მაინც იქნება მისი გადიდების შესაძლებლობა.

საბოლოო ჯამში,

გადავწყვიტე, რომ ამის შემდეგ ყოველთვის em გამოვიყენო ან პროცენტი.. :P

საინტერესო საკითხავი აღნიშნულ საკითხზე:
px – em – % – pt – keyword
CSS Font-Size: em vs. px vs. pt vs. percent



Update: არა, ყოველთვის px-ს ვიყენებ და ბედნიერი ვარ :) )

პირობითი კომენტარები HTML კოდში

ხანდახან მეტად გამაღიზიანებელია IE-ს საქციელი. წერ css სტილებს, ყველა ნორმალურ ბრაუზერში ნორმალურად მუშაობს, მაგრამ Internet Explorer-ში, რომელსაც ჯერ ჯერობით მაინც ძალიან ბევრი მომხმარებელი ყავს, რაღაცეები აბდა უბდა გამოდის.
ზოგიერთ ასეთ შემთხვევაში მოსახერხებელია პირობითი კომენტარების (conditional comments) გამოყენება რომლებიც მხოლოდ MS Internet Explorer-ში მუშაობს.
ამ კომენტარებს IE-ს ვერსიების გარჩევაც კი შეუძლიათ 5.0-დან ზევით.
მაგალითად:

 

<!--[if IE 6]>
ეს ტექსტი გამოჩნდება მხოლოდ მაშინ თუ საიტი IE 6-ში იხსნება.
<![endif]-->

 

სხვა ბრაუზერები კი მთელ ტექსტს კომენტარად აღიქვამენ (<!– –>) ნიშნების გამო.

რადგან ეს html სტრუქტურის ნაწილია, პირობით კომენტარებს css გვერდებში ვერ ჩავრთავთ, სამაგიეროდ შეგვიძლია ასეთი რამის გაკეთება:

 

<link rel="stylesheet" type="text/css" href="common.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->

 

შესაძლო პირობები:

 

<p><!--[if IE]>
ეს Internet Explorer-ია<br />
<![endif]-->
<!--[if IE 5]>
ეს Internet Explorer 5-ია<br />
<![endif]-->
<!--[if IE 5.0]>
ეს Internet Explorer 5.0-ია<br />
<![endif]-->
<!--[if IE 5.5]>
ეს Internet Explorer 5.5-ია<br />
<![endif]-->
<!--[if IE 6]>
ეს Internet Explorer 6-ია<br />
<![endif]-->
<!--[if IE 7]>
ეს Internet Explorer 7-ია<br />
<![endif]-->
<!--[if gte IE 5]>
ეს Internet Explorer 5-ია ან მისი მომდევნო ვერსიებიდან ერთ-ერთი <br />
<![endif]-->
<!--[if lt IE 6]>
ეს Internet Explorer 6-ზე ძველი ვერსიაა<br />
<![endif]-->
<!--[if lte IE 5.5]>
Internet Explorer-ის ეს ვერსია ნაკლებია 5.5-ზე ან 5.5-ია<br />
<![endif]-->
<!--[if gt IE 6]>
Internet Explorer -ის ეს ვერსია 6-ზე ახალია<br />
<![endif]-->
</p>