4 заметки с тегом

веб-разработка

2018   img   веб-разработка

Осторожно! В сети замечен пожиратель курсоров!

Осторожно! В сети замечен пожиратель курсоров, он же «Курсорный монстр»!

Описание: «Неопознанное существо неопределенной формы (предположительно сам себя создавший и самоосознавшийся вирус) синеватого оттенка с двумя глазами и двумя зубами. Может встретиться где угодно на просторах сети интернет в любых браузерах, поддерживающих технологии css, js, html (конкретно iframe). Чрезвычайно опасен тем, что может поглотить курсор любого пользователя, безобидно шатающегося по интернет-пространству. В затаившемся состоянии притворяется спящим. Но ни в коем случае, при обнаружении подозрительной сущности, похожей на описанное не ведитесь на уловку! Он совершенно неподвижен, но достигает своей цели играя на людском любопытстве! При приближении курсора довольно близко он проглатывает его стараясь переварить и превратить в двоичный код, с помощью которого в последствии (при съедении довольно большого количества курсоров) он может эволюционировать. Так что, уважаемые интернет граждане! Не играйтесь с ним, не давайте ему курсор надолго! При поглощении курсора сразу звонить охотникам за привидениями и идти за новой мышкой.
Для пользователей мобильных устройств совершенно безопасен. Может разве что тяпнуть за палец.»

Вот такая информация появилась в сети. Вирусы эволюционируют. Поэтому всем еще раз советую проверить свои устройства на вирусы, сделать это можно самостоятельно. Чтобы узнать как, читайте в моей статье: Лечение компьютерных вирусов «самостоятельно»

Если все таки попались на уловки маленького монстра, пишите, постараюсь чем-нибудь помочь.

«Разжатие» кода php

Веб-дизайнерам, программистам и разработчикам.

Может быть тот факт, что я не смог подобрать правильный термин для этого действа, я не отыскал то что нужно в интернете.

Имею я ввиду процесс, обратный минификации кода. Одно дело, кода ты код сжал, чтобы ускорить сайт, а другое дело когда тебе потребовалось с этим кодом работать. Своим или чужим не важно. То есть «разжать», «разминифицировать» его надо. Привести к читабельному виду.

Для HTML, CSS, JS этого добра хватает, а вот конкретно для PHP я почему-то не нашел. Если знаете почему, или знаете где найти — буду благодарен за комментарии.

Спас сервис DIRTYMARKUP, почему-то он сделал то что нужно, когда я указал, что мой PHP это CSS. Впрочем даже хорошо, что такая наглая ложь веб-приложение не испугала.

В общем пользуйтесь, набредшие сюда с такой же проблемой интернет странники.

Найдете что-нибудь получше — напишите, я подправлю. Другим будет проще и сам буду пользоваться.

Автоматическое масштабирование сайта по ширине браузера клиента

Лайфхак для веб-разработчиков и веб-дизайнеров.


Вопрос возник довольно давно (по меркам IT сферы), где-то полгода назад. После этого интернет не шерстил и не знаю, насколько более изящные решения уже имеются в свободном доступе.
В тот раз за сутки решение для себя так и не отыскал, пришлось написать самому.

Задача стояла следующая: сайт не имеет адаптивной верстки для разных устройств и более того при открытии на устройствах разного типа видно только часть сайта. Клиенту приходится самостоятельно сайт масштабировать, чтобы прочитать нужный контент. Требовалось быстро (в течении суток) адаптировать сайт.

В JavaScript я самоучка, поэтому могут быть ошибки, но факт: скрипт стабильно работает полгода на всех известных мне устройствах.

Решение довольно простое:

1) Вся суть в одной функции js, с помощью которой мы вычисляем ширину браузера клиента:

bra = document.body.clientWidth;

2) Оборачиваем весь сайт в контейнер:

CSS:

div#container
{
position:relative;
width: 0px;
margin-left: 0px;
margin-right: auto;
}

HTML:

<body>
     <div id="container">
          // здесь весь сайт
     </div>
</body>

3) В  head прописываем что делать в классическом случае при открытии на мобильном (как выяснилось не всегда гладко работает):

<meta content="width=device-width" name="viewport" />

4) Поэтому приправляем скриптиком для стабильности:

<script type="text/javascript">
var w = document.documentElement.clientWidth
$('meta[name="viewport"]').attr('content','width='+w);
 </script>

5) И заканчиваем парой функций, первая из которых определяет мобильное это устройство или нет, и что делать в каждом из случаев, а вторая определяет ширину браузера и в зависимости от этого значения соответствующим образом масштабирует сайт и двигает его к верхнему краю экрана:

<script>
function isMobile() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
}
if (isMobile() == false) {

bra=0;
ty=0;
sc=0;
function resize()
{
   bra = document.body.clientWidth;
   if (bra > 1200) {ty = (bra*bra/20366)-90}
   else {
     sc = bra/1200;
     ty = -1145.57*sc*sc*sc+1987.17*sc*sc-946.657*sc+39.6038;  //математическая формула, которую пришлось вычислить для того, чтобы сдвигать масштабированный сайт к верхнему краю экрана =))
}
   if (bra < 320) {ty = -120}
   sc = bra/1200;

   $("#container").css("transform", "scale("+sc+")");

   $("#container").css("margin-top", ""+ty+"px");
}

$(document).ready(function(){
$(window).resize(function() { resize(); });
        resize();
});
}
</script>

Буду рад, если кому-нибудь пригодится. Если найдете ошибки или знаете как сделать проще и лучше — пишите, подправим.

Сайт, реализованный таким образом вот этот.