http://textpattern.com/?v=4.0.4 http://higher.com.ua/ Tue, 03 Jan 2012 21:31:48 GMT <p>Очень часто случается так, что заказчики требуют 100% соответствия макета во всех браузерах, включая старые версии Internet Explorer.</p> <p>Попробуем объяснить, почему подобные требования являются не совсем обоснованными, порой бессмысленными и рассмотрим, как можно превратить несоответствия дизайна в различных браузерах в преимущества и какую пользу можно извлечь из этих несоответствий.</p> <p>В течение долгового времени веб-дизайн и дизайн для печати рассматривался как одно и тоже. Мне до сих пор часто приходится сталкиваться с подобным заблуждением. Веб является совершенно иной средой, в отличие от печати.</p> <p>Пользователи просматривают ваш сайт в самых различных браузерах и на различных устройствах, от ноутбуков до мобильных телефонов. Каждое устройство и программное обеспечение отображает веб-сайты по-разному. Если при печати дизайн будет оставаться неизменным, то веб не даст таких гарантий.</p> <p>Очень многие продолжают следовать этой противоречивой тенденции, пытаясь полностью удовлетворить заказчика и заставить отображаться дизайн одинаково во всех браузерах, создавая, современные эффекты, такие как, например, закругленные углы, тени, градиенты в Internet Explorer 7 или 8, не думая о цене подобных решений.</p> <p>Не секрет, что создание подобных деталей в Internet Explorer довольно трудоемкий процесс. Несмотря на огромное количество решений, каждый проект требует индивидуального подхода.</p> <p>В проектах с ограниченным бюджетом и ограниченным временными рамками, в особенности в стартапах будет более целесообразно уделить внимание бизнес-целям и тестированию, нежели деталям дизайна. Кто станет пользоваться бесполезным и неэффективным, но красивым сайтом?</p> <p>Кроме этого, какой смысл тратить время и деньги на поддержку визуальных эффектов в устаревших браузерах, которые постоянно вытесняются и заменяются более современными и новыми версиями, поддерживающими всеми любимые эффекты?</p> <p>Что касается технической стороны, то точное соответствие макета во всех браузерах достигается в основном за счет вспомогательных изображений и дополнительного кода, что естественно негативно сказывается на скорости загрузки вашего сайта, дальнейшей поддержке и скорости оперативного внесения изменений. В мире нетерпеливых пользователей, скорость загрузки и частота нововведений довольно важные составляющие успеха любого проекта.</p> <p>Чистый и легкий код позволяет быстро внести изменения в сайт. Поддержка кода, адаптированного под старые версии Internet Explorer превращается в головную боль. Представьте, если понадобится изменить цвет или радиус закругленных углов на сайте, то вам придется перерисовать ряд изображений, возможно, изменить разметку в шаблонах и внести изменения в стили, вместо замены строки кода в стилевом файле. В итоге это выливается во временные и денежные затраты. Наконец, некоторые дизайнерские решения попросту невозможны в старых браузерах.</p> <p>Как отнесутся пользователи к подобным несоответствиям? Ну во-первых, пользователи не станут просматривать ваш сайт одновременно во всех браузерах. Вполне возможно, что на несоответствия вам укажут лишь коллеги, которые не являются частью вашей целевой аудитории. Кроме этого, новыми проектами обычно начинают пользоваться наиболее продвинутые пользователи, это значит ваш сайт будут смотреть в современных браузерах. Мы не говорим, что нужно забыть о старых версиях браузеров, сайт должен быть одинаково доступен, хорошо выглядеть и работать везде. Во всем должна быть мера и задача дизайнера найти золотую середину. Многие ваши пользователи даже не узнают, как выглядит ваш сайт в старых версиях, поскольку веб очень динамично меняющаяся среда. Подводя итог, скажем лишь, что, эстетические различия в деталях дизайна в различных версиях браузеров &#8212; обязательное условие разработки современных веб-сайтов и поддержка старых версий браузеров есть не более чем неудачный шаг в прошлое.</p> <p><a href="http://feedads.g.doubleclick.net/~a/6hXhMgt45BaQsP098UAlQhS7SgY/0/da"><img src="http://feedads.g.doubleclick.net/~a/6hXhMgt45BaQsP098UAlQhS7SgY/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/6hXhMgt45BaQsP098UAlQhS7SgY/1/da"><img src="http://feedads.g.doubleclick.net/~a/6hXhMgt45BaQsP098UAlQhS7SgY/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/Higher/~4/97KLfRsyxoE" height="1" width="1"/> http://feedproxy.google.com/~r/Higher/~3/97KLfRsyxoE/gde-moi-zakruglennye-ugly Thu, 15 Sep 2011 09:46:38 GMT higher tag:higher.com.ua,2011-09-15:565e529644eef1c7230225c0c1730830/5fec20036a52f22497e796f30c733c7c http://higher.com.ua/article/152/gde-moi-zakruglennye-ugly Here we are using the <code><pre></pre></code> element to display text that includes a long URL. <p><a href="http://feedads.g.doubleclick.net/~a/S3ubPhm0345unais6A4k3crmwvM/0/da"><img src="http://feedads.g.doubleclick.net/~a/S3ubPhm0345unais6A4k3crmwvM/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/S3ubPhm0345unais6A4k3crmwvM/1/da"><img src="http://feedads.g.doubleclick.net/~a/S3ubPhm0345unais6A4k3crmwvM/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/Higher/~4/UuEJOYz8Vaw" height="1" width="1"/> http://feedproxy.google.com/~r/Higher/~3/UuEJOYz8Vaw/wrapping-long-urls-and-text-content-with-css Wed, 13 Apr 2011 21:11:37 GMT higher tag:higher.com.ua,2011-04-14:565e529644eef1c7230225c0c1730830/23977a11ccdf45e95b05cf13d0a02127 http://higher.com.ua/news/151/wrapping-long-urls-and-text-content-with-css Full-page vertical and horizontal centering with Flexible Box Layout <p><a href="http://feedads.g.doubleclick.net/~a/uDmbmrQlgQG8bugJuT7v-s1xfus/0/da"><img src="http://feedads.g.doubleclick.net/~a/uDmbmrQlgQG8bugJuT7v-s1xfus/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/uDmbmrQlgQG8bugJuT7v-s1xfus/1/da"><img src="http://feedads.g.doubleclick.net/~a/uDmbmrQlgQG8bugJuT7v-s1xfus/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/Higher/~4/lUhTkY4l2AA" height="1" width="1"/> http://feedproxy.google.com/~r/Higher/~3/lUhTkY4l2AA/full-page-vertical-and-horizontal-centering Wed, 13 Apr 2011 21:03:15 GMT higher tag:higher.com.ua,2011-04-14:565e529644eef1c7230225c0c1730830/f6d59a9e831915f8e586c8727e169278 http://higher.com.ua/news/150/full-page-vertical-and-horizontal-centering <div style="width:425px" id="__ss_4847990"><strong style="display:block;margin:12px 0 4px"><a href="http://www.slideshare.net/estellevw/iphone-web-applications-html5-css3-dev-tips-for-iphone-development-4847990" title="iPhone Web Applications: HTML5, CSS3 &amp; dev tips for iPhone development">iPhone Web Applications: HTML5, CSS3 &amp; dev tips for iPhone development</a></strong><object id="__sse4847990" width="425" height="355"><param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=css3iphone-100727120520-phpapp01&stripped_title=iphone-web-applications-html5-css3-dev-tips-for-iphone-development-4847990" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed name="__sse4847990" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=css3iphone-100727120520-phpapp01&stripped_title=iphone-web-applications-html5-css3-dev-tips-for-iphone-development-4847990" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355"></embed></object><div style="padding:5px 0 12px">View more <a href="http://www.slideshare.net/">presentations</a> from <a href="http://www.slideshare.net/estellevw">estellevw</a>.</div></div> <p><a href="http://feedads.g.doubleclick.net/~a/Mu2_tdVEkKZFVFS1OJBwbH6DnDc/0/da"><img src="http://feedads.g.doubleclick.net/~a/Mu2_tdVEkKZFVFS1OJBwbH6DnDc/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/Mu2_tdVEkKZFVFS1OJBwbH6DnDc/1/da"><img src="http://feedads.g.doubleclick.net/~a/Mu2_tdVEkKZFVFS1OJBwbH6DnDc/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/Higher/~4/cSeT-YaL2NA" height="1" width="1"/> http://feedproxy.google.com/~r/Higher/~3/cSeT-YaL2NA/iphone-web-applications-html5-css3-dev-tips-for-iphone-development Fri, 06 Aug 2010 08:25:29 GMT higher tag:higher.com.ua,2010-08-06:565e529644eef1c7230225c0c1730830/e60aebff65d897e2a904f715baea9066 http://higher.com.ua/news/149/iphone-web-applications-html5-css3-dev-tips-for-iphone-development <form id="converter"> <fieldset> <p><label for="rgba">rgba()</label> <input id="rgba" name="rgba" value="rgba(255,0,0,0.5)"> <label for="argb">#ARGB</label> <input id="argb" name="argb" value="#7FFF0000"></p> </fieldset> </form> <script> (function ($) { $(function () { $("#converter").submit(function(){return false;}); $("#rgba").bind('keyup change', function () { var value = $(this).val(); setArgb(value); }); $("#argb").bind('keyup change', function () { var value = $(this).val(); setHex(value); }); setArgb = function(val) { var valArr = val.split("(")[1].split(")")[0].split(","), red = toHex(valArr[0]), green = toHex(valArr[1]), blue = toHex(valArr[2]), alpha = toHex(valArr[3]*255); $("#argb").val("#" + alpha + red + green + blue); }; setHex = function(val) { var value = val.substring(1,9), red = parseInt(value.substring(2,4), 16), green = parseInt(value.substring(4,6), 16), blue = parseInt(value.substring(6,8), 16), alpha = Math.round((parseInt(value.substring(0,2), 16)/255)*10)/10; $("#rgba").val("rgba(" + red + "," + green + "," + blue + "," + alpha +")"); }; toHex = function(val) { val = parseInt(val); val = Math.max(0,val); val = Math.min(val,255); val = Math.round(val); return "0123456789ABCDEF".charAt((val-val%16)/16) + "0123456789ABCDEF".charAt(val%16); }; }) }(jQuery)); </script> <p><a href="http://feedads.g.doubleclick.net/~a/hWPxrqhH7Pjsr2u8E88JBOfI-ck/0/da"><img src="http://feedads.g.doubleclick.net/~a/hWPxrqhH7Pjsr2u8E88JBOfI-ck/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/hWPxrqhH7Pjsr2u8E88JBOfI-ck/1/da"><img src="http://feedads.g.doubleclick.net/~a/hWPxrqhH7Pjsr2u8E88JBOfI-ck/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/Higher/~4/klkshmfV2oA" height="1" width="1"/> http://feedproxy.google.com/~r/Higher/~3/klkshmfV2oA/rgba-argb-converter Thu, 05 Aug 2010 08:24:22 GMT higher tag:higher.com.ua,2010-08-05:565e529644eef1c7230225c0c1730830/7004adac6dbe32abc38611350c640982 css3 rgba http://higher.com.ua/news/148/rgba-argb-converter