HTML / CSS დახმარება

[temo2Ginal]

Grichika
რამდენადაც ვიცი ასპ საიტებს ბევრად მეტი რესურსი სჭირდება პჰპ სთან შედარებით.
საფუძველისთვის, ჩემი აზრით, ასპ-ს სწავლას ჯობია რამე სხვა ისწავლო.
თუ მაინცდამაინც asp გინდა ASP.NET MVC  ისწავლე.
 
 
ალბათ სურათებზე, დივებზე, ცხრილებზე, თუ რასაც იყენებ ფიქსირებული ზომები გაქვს მითითებული.
პროცენტები გამოიყენე მაგ ზომების ნაცვლად.
ანუ დავუშვათ გაქვს ეგეთი რამ:
 
 
<table style="width:200px; background-color:red">
   <tr>
       <td style="width:60px; background-color:green">a</td>
       <td style="width:140px; background-color:orange">b</td>
   </tr>
</table>
 
ამის ნაცვლად წერ ამას:
 
 

 
 
<table style="width:100px; background-color:red">
<tr>
<td style="width:30%; background-color:green">a</td>
<td style="width:70%; background-color:orange">b</td>
</tr>
</table>

 

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

[Grichika]

temo2Ginal,

 

 

აბსოლუტე რომ გამოვიყენო ეგ არ უშველის? 

[GIBSON]

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

[Grichika]

html davdo თუ css ს კოდები?

[Shoti]

პროცენტი ზუმთან რატომ არაა შუაში? ზუმის დროს ამ შემთხვევაში უნდა ვიგულისხმოთ რეზოლუციის ცვლივლება, ანუ ზუმის გაზრდა = შემცირებულ რეზოლუციას. პროცენტი კარგია, მაგრამ ერთ-ერთი ნიუანსია იმ საკმაოდ დიდ თემაში რასაც Responsive web design - ი ქვია, არაა პატარა თემა, ჩაჯდომა დაგჭირდება. 

მოკლედ შენ გჭირდება Responsive web design - ის გააზრება და შემდეგ სწავლა. http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

[Grichika]

პროცენტი ზუმთან რატომ არაა შუაში? ზუმის დროს ამ შემთხვევაში უნდა ვიგულისხმოთ რეზოლუციის ცვლივლება, ანუ ზუმის გაზრდა = შემცირებულ რეზოლუციას. პროცენტი კარგია, მაგრამ ერთ-ერთი ნიუანსია იმ საკმაოდ დიდ თემაში რასაც Responsive web design - ი ქვია, არაა პატარა თემა, ჩაჯდომა დაგჭირდება. 

მოკლედ შენ გჭირდება Responsive web design - ის გააზრება და შემდეგ სწავლა. http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

euuf მანდ რა გაიგებს მოკლედ არ შეიგიძლია რომ ამიხსნა ?

[Shoti]

euuf მანდ რა გაიგებს მოკლედ არ შეიგიძლია რომ ამიხსნა ?

ისეთი ბრეინ ფაქინგი მაქვს სამსახურში მაგის კიარა არაფრის ახსნა არ შემიძლია ეხლა

მაგრამ ჩაჯდომა უნდა მაგას და კოდის საკმაოდ სერიოზულად გადაკეთება.

[Grichika]

ისეთი ბრეინ ფაქინგი მაქვს სამსახურში მაგის კიარა არაფრის ახსნა არ შემიძლია ეხლა

მაგრამ ჩაჯდომა უნდა მაგას და კოდის საკმაოდ სერიოზულად გადაკეთება.

მინიშნება მაინც მმომეცი როგორ და მივხვდები მანდ იმდენი მაგალთი არის რავი ერთი ორი კი ვცადე

[Grichika]

და კიდე იქნებ იცოდეთ გადავირია მპ3 ის ჩასმა მინდა არ ჯდება არანაირად..

 

<audio controls >

<source src="sound.mp3" >

</audio>

 

 

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

[Shoti]

მინიშნება მაინც მმომეცი როგორ და მივხვდები მანდ იმდენი მაგალთი არის რავი ერთი ორი კი ვცადე

უფრო კონკრეტულად რაგინდა?

 

 

და კიდე იქნებ იცოდეთ გადავირია მპ3 ის ჩასმა მინდა არ ჯდება არანაირად..

 

<audio controls >

<source src="sound.mp3" >

</audio>

 

 

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

 

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

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

[Grichika]

Shoti,

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

 

 

სიმღერა კიდე: არ ქნა მაინც ეგრე ისედაც ვიცალიცე უკვე , სხვა ფაილში შვრება

 

ჰოსტზე რომ აიტვირთება იქიქდან გაეშვება უკვე ხო?

 

ისე როგორ გავაკეთო მპ3 კონტროლერზე რომ მარტო კონტროლერი იყო ხმის ასაწევ გასათიში სხვა არაფერი?

[Grichika]

ჰოსტზე ავტვირთე და არ მუშაობს მპ3

[Shoti]

ჰოსტზე ავტვირთე და არ მუშაობს მპ3

არვიცი შენ რას აკეთებ ჩემთან მუშაობს აშკარად. ბრაუზერს რას იყენებ?

 

 

 

 

 

ისე როგორ გავაკეთო მპ3 კონტროლერზე რომ მარტო კონტროლერი იყო ხმის ასაწევ გასათიში სხვა არაფერი?

შენ რასაც ახლა იყენებ არის HTML5 ის ჩაშენებული API, დაგუგლე და ნახავ რისი საშუალება გაქვს.

 

 

 

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

 

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

[GIBSON]

სურათის ვარდნა სხვა რამის გამო მგონია, დადე სორსი აბა html css

 

Shoti,

შედი ნებისმიერ ნორმალურ საიტზე სადაც რესპონსივ არაა და დაზუმე, რომელი იქნება დეფორმირებული 

[Grichika]

გავაკეთე უკვე

[Grichika]

მობილურის ვერსეიბი როგორ კეთდება საიტების? ანუ ჩვეულებრივი საიტი ხო არის, და ვინმე რომ შევიდეს მობილურით კიდე მობილურის ვერსით გაუხსნას

[Shoti]

მობილურის ვერსეიბი როგორ კეთდება საიტების? ანუ ჩვეულებრივი საიტი ხო არის, და ვინმე რომ შევიდეს მობილურით კიდე მობილურის ვერსით გაუხსნას

 

 

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

 

 

შედი ნებისმიერ ნორმალურ საიტზე სადაც რესპონსივ არაა და დაზუმე, რომელი იქნება დეფორმირებული 

ვერ მივხვდი რა იგულისხმე.

[Grichika]

კი შეიძლება მობილურმა დაინახოს მაგრამ მინდა რომ ცალკე დიზაინი ქონდეს, ცალკე იყოს აწყობილი როგორ უნდა ?

[Shoti]

კი შეიძლება მობილურმა დაინახოს მაგრამ მინდა რომ ცალკე დიზაინი ქონდეს, ცალკე იყოს აწყობილი როგორ უნდა ?

ცალკე? გააკეთე საბდომენი და გაუშვი. გაქვს site.ge გააკეთე ragaca.site.ge და ვსო.

[Grichika]

ცალკე? გააკეთე საბდომენი და გაუშვი. გაქვს site.ge გააკეთე ragaca.site.ge და ვსო.

 

 

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

[Shoti]

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

ავტომატურად არუნდა გახსნას ragaca.site.ge ზე უნდა შევიდეს მომხმარებელი მობილურიდან. თუ ავტომატურად გინდა PHP კოდი გჭირდება რომელიც ავტომატურად გადაამისამართებს მობილურებს მობილურ ვერსიაზე.

[Grichika]

ავტომატურად არუნდა გახსნას ragaca.site.ge ზე უნდა შევიდეს მომხმარებელი მობილურიდან. თუ ავტომატურად გინდა PHP კოდი გჭირდება რომელიც ავტომატურად გადაამისამართებს მობილურებს მობილურ ვერსიაზე.

 

 

აი მაგალითად მაივიდეოზე რომ შევიდე ეგრევე მობილურის ვერსიას ამოაგდებს, მაგ პჰპ -ს კოდი არ იცი?

ცოტა მარტო სიტე არის ჰტმლ ცსს მაშინაც პჰპ უნდა?

[Shoti]

აი მაგალითად მაივიდეოზე რომ შევიდე ეგრევე მობილურის ვერსიას ამოაგდებს, მაგ პჰპ -ს კოდი არ იცი?

ცოტა მარტო სიტე არის ჰტმლ ცსს მაშინაც პჰპ უნდა?

HTML ში და CSS - ში? სად გაქვს დაჰოსთილი PHP - ის მხარდაჭერა თუ გაქვს ამ ფუნქციით გაიგებ მობილურითაა შემოსული კლიენტი თუ არა:

 

function is_mobile()
{
   static $is_mobile;
   if (is_null($is_mobile))
   {
      //mobile detect
      $mobile_browser = '0';
       
      if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i', strtolower($_SERVER['HTTP_USER_AGENT']))){
         $mobile_browser++;
      }
       
      if ((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0) or
         ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
            $mobile_browser++;
         }
       
      $mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
      $mobile_agents = array(
         'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
         'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
         'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
         'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
         'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
         'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
         'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
         'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
         'wapr','webc','winw','winw','xda','xda-','mobile');
       
      if (in_array($mobile_ua,$mobile_agents)){
            $mobile_browser++;
         }
      if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini')>0) {
            $mobile_browser++;
         }
         
         if (strpos(strtolower($_SERVER['ALL_HTTP']),'UCWeb')>0) {
            $mobile_browser++;
         }
         
      if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows')>0) {
            $mobile_browser = 0;
         }
      $is_mobile = $mobile_browser > 0;
   }
   return $is_mobile;
   //mobile detect   
}

თუ PHP -ს მხარდაჭერა არ გაქვს შეგიძლია JavaScript -ი გამოიყენო:

 

window.mobilecheck = function() {
var check = false;
(function(a){if(/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
return check; }

თუ Apache  გიყენია შეგიძლია ესეც გამოიყენო:

 

RewriteEngine On
RewriteBase /


RewriteCond %{HTTP_USER_AGENT} (android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-) [NC]
RewriteRule ^$ http://ragac-saiti.ge [R,L]

მოკლედ ბევრი ვარიანტია რავიცი.

[Grichika]

რეზინისებრ საიტებს ვერ ვაკეთებ რომ ყველა სხხვის ეკრანს მოერგოს რისი ბრალია? როგორ გავაკეთო?

 

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

[Shoti]

რეზინისებრ საიტებს ვერ ვაკეთებ რომ ყველა სხხვის ეკრანს მოერგოს რისი ბრალია? როგორ გავაკეთო?

 

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

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

ამ კურსს ჯაუჯექი: http://courses.tutsplus.com/courses/responsive-web-design-for-beginners