Советы. Делаем сайт

**Olezhik** · 07-10-2013, 03:26 AM

Originally Posted by crazy-mike

Класс! В том и всё дело , что никакой нагрузки на сервак , а на стороне клиента мощности процессора хватает.
Я вот пробовал сравнить по "интенсивности использования процессора" интерфейс на Адбобе Флаш с интерфейсом на ЯваСцрипт. При работе с Флаш аккумулятор разряжался намного быстрее.

Что такое [Adobe Flash]

? Уже давно вышел [HTML 5] [SVG/Canvas] На предпоследнем проэкти для [NBCUniversal] я использовал [SVG] чертил любые кинотеатры, залы и просто помешений в течений 20 милисекуд дынамически. Правда когда в зале было по 5 тысяч мест занимала аж 2 сикунды всё начертить

Так что Флаш это вчерашни день, точнея прошлы век.

**crazy-mike** · 07-10-2013, 04:14 AM

Originally Posted by Olezhik

Что такое [Adobe Flash]

? Уже давно вышел [HTML 5] [SVG/Canvas] На предпоследнем проэкти для [NBCUniversal] я использовал [SVG] чертил любые кинотеатры, залы и просто помешений в течений 20 милисекуд дынамически. Правда когда в зале было по 5 тысяч мест занимала аж 2 сикунды всё начертить

Так что Флаш это вчерашни день, точнея прошлы век.

Adobe Flash - имеется ввиду Adobe Flex 4.6. Пару лет назад его пробовали позиционировать как "COBOL для Smart TV". Его ведь не столько для "картинок" использовать сколько для интеграции онлайн-видео с БД.
Удобно тем , что весь UI можно тупо загнтать в один SWF-файл. Не так уж сильно от Java отличается. Там ещё и standalone applications можно делать. В этом случае нужно , чтобы на платформе клиента было установлено AIR runtime. В таком варианте ведь Flash - это не совсем вчерашний день. Вот только реализация у Adobe не совсем "эффективная" для микропроцессоров ARM. На планшетах их радость жрёт намного больше ресурсов чем JavaScript. Хотя JavaScript под Google Chrome тоже жрёт ресурсы. Если сравнивать браузеры на планшетах , то пока возникает подозрение о том , что Google Chrome как бы "прожорливее" чем Mozilla Firefox для Android.

**Olezhik** · 07-10-2013, 12:37 PM

Originally Posted by crazy-mike

Адобе Флаш - имеется ввиду Адобе Флех 4.6. Пару лет назад его пробовали позиционировать как "ЦОБОЛ для Смарт ТВ". Его ведь не столько для "картинок" использовать сколько для интеграции онлайн-видео с БД.
Удобно тем , что весь УИ можно тупо загнтать в один СЩФ-файл. Не так уж сильно от Ява отличается. Там ещё и стандалоне апплицатионс можно делать. В этом случае нужно , чтобы на платформе клиента было установлено АИР рунтиме. В таком варианте ведь Флаш - это не совсем вчерашний день. Вот только реализация у Адобе не совсем "эффективная" для микропроцессоров АРМ. На планшетах их радость жрёт намного больше ресурсов чем ЯваСцрипт. Хотя ЯваСцрипт под Гоогле Чроме тоже жрёт ресурсы. Если сравнивать браузеры на планшетах , то пока возникает подозрение о том , что Гоогле Чроме как бы "прожорливее" чем Мозилла Фирефох для Андроид.

Да я в курсе что такое флаш, только нафиг он кому нужен когда есть [html5]

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(100, 20);

// line 1
context.lineTo(200, 160);

// quadratic curve
context.quadraticCurveTo(230, 200, 250, 120);

// bezier curve
context.bezierCurveTo(290, -40, 300, 200, 400, 150);

// line 2
context.lineTo(500, 90);

context.lineWidth = 5;
context.strokeStyle = 'blue';
context.stroke();

</script>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
function loadCanvas(dataURL) {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

// load image from data url
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(this, 0, 0);
};

imageObj.src = dataURL;
}

// make ajax call to get image data url
var request = new XMLHttpRequest();
request.open('GET', 'http://www.html5canvastutorials.com/demos/assets/dataURL.txt', true);
request.onreadystatechange = function() {
// Makes sure the document is ready to parse.
if(request.readyState == 4) {
// Makes sure it's found the file.
if(request.status == 200) {
loadCanvas(request.responseText);
}
}
};
request.send(null);

</script>
</body>
</html>

**crazy-mike** · 07-10-2013, 02:27 PM

Originally Posted by Olezhik

Да я в курсе что такое флаш, только нафиг он кому нужен когда есть [html5]

Ну не то чтобы уж совсем не нужен. HTML5 в разных браузерах поддерживается "не совсем одинаково".
Ну а HTML5 видеоплеер в Google Chrome в различных операционных системах работает совсем по-разному ( под Ubuntu Linux не так как под Android, например ).

Вот тебе ( кусочек "вводилки" для планшета на html5. Там вcё вместе не-gzipped занимает около 15 килобайт. Непосредственный аналог на Adobe Flash - около 56 килобай - swf файл ):

HTML Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Crazy Home ( via HTML5 )</title>
<style type="text/css" media="all" >.....</style>
<script>
   var Lang = {
     it :function() {
       .......
     }
   };    

   var Close = {
     it :function () {
       ....... 
     }
   };

   var Table = {
    cnt :0,    
    curtr :null,    

    see :function(tid)
    { var s,vi;
      s=document.getElementById(tid);
      vi=s.firstChild; vi.style.display="block";
      return vi;
    },

    head :function(a)
    { var thd,i,t;
      i=0;
      thd=document.createElement("thead");
      while(i<a.length) {
        t=document.createElement("th"); t.textContent=a[i];
	i++; 
        thd.appendChild(t);
      };
      return thd;
    },

    saveDesc :function (ev)
    { ...
    },

    edit :function(isn,v) {
      .......
    },

    describe :function (ev)
    { ....   },

    aRef :function(r) {
      var ar,k;
      k=r.indexOf("//");
      if(k==-1) k=0; else k+=2;
      ar=r.substr(k,15);
      return ar;
    },
    
    markNew :function(tid) {
      var vi,t,tb;
      vi=Table.see(tid);
      t=vi.getElementsByTagName("table").item(0);
      tb=t.getElementsByTagName("tbody").item(0);
      tb.firstChild.setAttribute("n","n");
    },

    add :function (tid,isn,tm,ref) {
      var s,vi,t,tr,td,q,cnt,tc,a,zlnk;
      zlnk=Table.aRef(ref);
      vi=Table.see(tid);
      t=vi.getElementsByTagName("table").item(0);
      tb=t.getElementsByTagName("tbody").item(0);
      tr=document.createElement("tr"); tr.setAttribute("i",isn);
      td=document.createElement("td"); td.textContent=tm; tr.appendChild(td);
      td=document.createElement("td"); td.textContent=zlnk;; tr.appendChild(td);
      td=document.createElement("td"); td.textContent="?";
      td.addEventListener("click",Table.describe,false);
      tr.setAttribute("n","n");
      tr.appendChild(td);
      td=document.createElement("td"); td.textContent="0"; tr.appendChild(td);
      q=tb.firstChild;
      if(!q.hasAttribute("class")) tr.setAttribute("class","odd");
      tb.insertBefore(tr,q);
      cnt=tb.childNodes.length;
      tc=t.getElementsByTagName("caption").item(0);
      a=tc.textContent.split(")");
      tc.textContent="("+cnt+")"+a[1];
    },
    
    make :function(ti,tid,dd)
     { var a,n,i,s,t,isn,cn,xtime,lng,ref,tb,tr,vi,tc,ca,th,thd,bf;
       a=dd.split("&"); n=a.length;
       i=0; Table.cnt=0;
       s=document.getElementById(tid);
       if(s.firstChild!=null) s.removeChild(s.firstChild);
       vi=document.createElement("div");
       cls=Close.it();
       if(n<2) { vi.textContent="no data!"; 
         s.appendChild(vi); vi.appendChild(Close.it()); 
	 return; 
       }; 
       vi.style.width=(window.innerWidth-64)+"px";
       vi.style.height=window.innerHeight+"px";
       vi.style.overflow="auto";
       vi.appendChild(cls);
       i=0;
       t=document.createElement("table");
       t.style.width="100%";
       ca=document.createElement("caption");
       ca.textContent=ti;
       t.appendChild(ca);
       tb=document.createElement("tbody");
       n-=6; bf=true;
       while(i<n) {
         tr=document.createElement("tr");
	 if(bf) tr.setAttribute("class","odd");
	 bf=!bf;
         isn=a[i]; i++; tr.setAttribute("i",isn);
	 cn=a[i]; i++; 
	 xtime=a[i]; i++; 
	 lng=a[i]; i++;
	 ref=a[i]; i++;
	 descr=a[i]; i++;
         tc=document.createElement("td"); tc.textContent=xtime; tr.appendChild(tc);
	 tc=document.createElement("td"); tc.textContent=ref; tr.appendChild(tc);
	 tc=document.createElement("td"); tc.textContent=descr; 
           tc.addEventListener("click",Table.describe,false);
         tr.appendChild(tc);
         tc=document.createElement("td"); tc.textContent=cn; tr.appendChild(tc);
	 tb.appendChild(tr);
	 Table.cnt++;
       };               
       ca.textContent="("+Table.cnt+")"+ti;
       thd=Table.head(["time","URL","description","attr cnt"]);
       thd.childNodes.item(0).style.width="15%";
       thd.childNodes.item(1).style.width="20%";
       thd.childNodes.item(2).style.width="50%";
       thd.childNodes.item(3).style.width="15%";
       t.appendChild(thd);
       t.appendChild(tb);
       vi.appendChild(t);
       s.appendChild(vi);
       document.body.getElementsByTagName("footer").item(0).textContent=ti;
     }
   };

   var Xdate = {
   
     selectByDate :function(zdate)
     { ...... 
     }
   };

   var NewItem = {
     znew :0,    

     sendURL :function(ev) { 
       .......
     },

     it :function() { ....}; 

   var ToolBar = {
     setLang :function(ev) {
       Lang.it();
     },
     
     addItems :function(ev) {
       NewItem.it();          
     },

     dates :function(ev) {
       .....
     },
   
     today :function(ev) {
       var hte=new XMLHttpRequest();
       hte.overrideMimeType('text/xml');
       hte.onreadystatechange=function() {
         if(hte.readyState==3) return; if(hte.readyState!=4) return;
         if(hte.status!=200) return;
         var v=hte.responseText;
         Table.make("today links","today",v);
       };
       Info.it("today");
       hte.open('GET',"./today.php",true);
       hte.send(null);
     },
   
     menu :function() {
       var nav;
       nav=document.body.getElementsByTagName("nav").item(0);
       nav.style.display="table-cell";
       nav.style.width="64px";
       nav.style.height=window.innerHeight+"px";
       nav.style.background="#0000ff";    
     }
   }

   var Info = {
     it :function(v)
     { document.body.getElementsByTagName("header").item(0).textContent=v;
     }
   }

   var Login = {
     ok :function() {
       document.body.getElementsByTagName("footer").item(0).style.display="none";
       Info.it("ok!");
       ToolBar.menu();
     },

     fail :function() {     
       document.body.getElementsByTagName("footer").item(0).textContent="fail!";
     },

     enter :function(ev) {
       var hte;
       var ilogin=document.getElementById("ilogin").value;
       var ipass=document.getElementById("ipass").value;
       Info.it("authentification");
       var hte=new XMLHttpRequest();
       hte.overrideMimeType('text/xml');
       hte.onreadystatechange=function() {
         if(hte.readyState==3) return; if(hte.readyState!=4) return;
         if(hte.status!=200) return;
         var v=hte.responseText;
         if(v.indexOf("ok;")!=-1) Login.ok();
         else Login.fail();          
       };
       var par="xxlogin="+ilogin+"&xxpass="+ipass;
       hte.open('POST',"./login.php",true);
       hte.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
       hte.send(par);
     }
   };
</script>
<link rel="shortcut icon" href="./im/smarthome.gif" />
</head>
<body>
<header>
</header>
<nav>
<img id="iaddurl" src="./mu/addurl.jpg" onclick="ToolBar.addItems(event)" /><br />
<img src="./mu/today.jpg" onclick="ToolBar.today(event)" /><br/>
<img src="./mu/calendar.jpg" onclick="ToolBar.dates(event)" /><br/>
<img src="./mu/setlang.jpg" onclick="ToolBar.setLang(event)" /><br/>
</nav>
<section id="qdescr">
</section>
<section id="newitem">
</section>
<section id="lastitems">
</section>
<section id="bydate">
</section>
<section id="dates">
</section>
<section id="today">
</section>
<footer>
login:<input type="text" id="ilogin" value="" size="20" /><br>
xpass:<input type="password" id="ipass" value="" size="20" /><br>
<button onclick="Login.enter(event)">Sign On</button>
</footer>
</body>
</html>

**crazy-mike** · 07-10-2013, 02:32 PM

И там чуть-чуть смешная таблица стилей ( на странице ):

HTML Code:

<style type="text/css" media="all" >
  body { display :table-row; background-color :#4e85e0; }
  button { cursor :pointer; margin :0.3em; }
  button:hover { font-size :130%; }
  input { margin :0.3em; }
  header { display :table-cell; width :3em; max-width :3em; 
    text-decoration :blink; color :#ffffff; 
  }
  .odd { background-color :#9fb6bc; }
  td { border :1px solid; border-collapse :collapse; text-indent :0.3em; 
    padding-top :1em; padding-bottom :0.3em;
  }
  td:hover { background-color :#000000; color :#ffffff; }
  table caption { font-weight :bold;  }
  table { border-collapse :collapse; }
  th { border :1px solid; border-collapse :collapse; background-color :#ffff00; }
  tr:hover { background-color :#00ffff; font-size :150%; cursor :pointer; }
  nav { display :none; }
  nav img { width :64px; height :6em; border :1px outset;  
    cursor :pointer; 
  }
  nav img:hover { font-size :150%; }
  section { display :table-cell; vertical-align :top; }
  footer { display :table-cell; width :40em; font-size :150%; }
  section div { margin :0.3em; overflow :auto;  border :1px outset #000000; 
    background-color :#3fa9c4; 
  }
</style>

**реднек** · 07-10-2013, 02:34 PM

Originally Posted by Olezhik

Работал над одним проектом где мы делали динамичны [css]ну это дествительно было головная боль, просто так клиент хотел. С [ember] никогда не работал, посмотрел видео вроде очень похоже на [backbone]. Чтоб зделать проект по интерестней я ещё всё загнал в http://coffeescript.org/ Так что там теперь без пол литра не разберуться

Ну, да CoffeScript вместо JS, HAML вместо HTML, SASS вместо CSS. К поллитру еще нужен косяк.

**crazy-mike** · 07-10-2013, 02:43 PM

Originally Posted by реднек

Ну, да CoffeScript вместо JS, HAML вместо HTML, SASS вместо CSS. К поллитру еще нужен косяк.

В html5 плохо то , что его каждый браузер чуть иначе поддерживает ( html5 video , например ). Там ещё один прикол есть - эти браузеры ещё и MIME types в заголовках http-запросов не всегда правильно понимают - под Android такая "радость" для Google Chrome наблюдается. А под Firefox для Android всё нормально. - я часто делаю gzipped html и даю ему расширение .htz. И в .htaccess там все эти фокусы с AddType и AddEncoding есть. Под Linux и Windows всё нормально работает. Под Android этот Google Chrome такого в упор не понимает - хотя ему всё передаётся. Но Firefox кругом работает одинаково - и под Android , и под Linux , и под Windows.

**Olezhik** · 07-10-2013, 04:20 PM

По большому счёту мне пофиг на чем работать, главное чтоб платили

Последние время больше архетекту делаю и скидываю весь головняк на програмистов. Правда чясто остаюсь на проектах до конца и сам при необходимости програмирую то что другий нехотят, или не могут.

**Olezhik** · 07-10-2013, 04:26 PM

Originally Posted by crazy-mike

В хтмл5 плохо то , что его каждый браузер чуть иначе поддерживает ( хтмл5 видео , например ). Там ещё один прикол есть - эти браузеры ещё и МИМЕ тыпес в заголовках хттп-запросов не всегда правильно понимают - под Андроид такая "радость" для Гоогле Чроме наблюдается. А под Фирефох для Андроид всё нормально. - я часто делаю гзиппед хтмл и даю ему расширение .хтз. И в .хтаццесс там все эти фокусы с АддТыпе и АддЕнцодинг есть. Под Линух и Щиндощс всё нормально работает. Под Андроид этот Гоогле Чроме такого в упор не понимает - хотя ему всё передаётся. Но Фирефох кругом работает одинаково - и под Андроид , и под Линух , и под Щиндощс.

Незнаю у меня во всех браузерах [HTML5 SVG] работал хорошо и оденакого. Может там какйта отдельные [HTML5] таги не все браузэры ещё понимают, но вот что косаеца [SVG] то там всё в порядке.

**crazy-mike** · 07-10-2013, 05:03 PM

Originally Posted by Olezhik

Незнаю у меня во всех браузерах [HTML5 SVG] работал хорошо и оденакого. Может там какйта отдельные [HTML5] таги не все браузэры ещё понимают, но вот что косаеца [SVG] то там всё в порядке.

Отдельные тэги?????? Там даже не в тегах дело. Хотя вот <script src="ddd.js" /> не понимает Mozilla Firefox , а для Google Chrome это как раз нормально. Для Mozilla Firefox обязательно нужно <script src"ddd.js"></script>. Там кое-что похуже - они понимают не совсем одинаково.
А ещё куча забавных различий в браузерах для мобильных телефонов и для компьютеров. В "родном" браузере на телефоне Nokia <header> обязательно располагается в верхней части страницы при рендеринге , а не там , где ему следует располагаться в соответствии с css.
Мне вот для планшетов нравится примерно так "хулиганить":
<style type="css/text" media="all">
body { display :table-row; }
header { display :table-cell; }
nav { display :table-cell; }
aside { display :table-cell; }
footer { display :table-cell; }
section { display :table-cell; }
</style>

Thread: Советы. Делаем сайт

Thread Tools

Display

Re: Советы. Делаем сайт

Re: Советы. Делаем сайт

Re: Советы. Делаем сайт

Re: Советы. Делаем сайт

Re: Советы. Делаем сайт

Re: Советы. Делаем сайт

Re: Советы. Делаем сайт

Re: Советы. Делаем сайт

Re: Советы. Делаем сайт

Re: Советы. Делаем сайт

Thread Information

Users Browsing this Thread

Posting Permissions