Blog. Just Blog

Web-мастеру и не только

Полезные решения для Web-мастеров
Web-мастеру и не только - RSS-канал Web-мастеру и не только - Карта сайта

Сравнение изображений на PHP

03.08.2018 | Категория: Web-мастеру и не только | Автор: ManHunter

Сравнение изображений на PHP

На работе возникла интересная задача. В базе имеются объекты, к каждому из которых привязано некоторое количество изображений. Проблема в том, что некоторые изображения дублируются, т.к. одно и то же исходное изображение было подгружено к объекту несколько раз. Дополнительная сложность заключается в том, что дубли могут отличаться по времени загрузки, а также быть в разном формате и с разным сжатием. То есть визуально их можно считать идентичными, а файлы по своим параметрам абсолютно разные. Объектов и изображений достаточно много, просмотреть каждый и обработать вручную нереально. Задача заключалась в автоматизации этого процесса.

Читать статью целиком »
Просмотров: 2307 | Комментариев: 7

Прячем IP-адрес сервера в ссылке

26.06.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
Все мы давно привыкли, что IP-адрес записывается при помощи 4 октетов, разделенных точками. Я имею в виду IPv4. Но по стандарту протокол TCP/IP также поддерживает адресацию, когда IP-адрес задан единым числом. Это число получается из октетов IP-адреса по определенной формуле. К примеру, IP-адрес главной страницы поисковика Google 64.233.165.94. Разобьем его на октеты и преобразуем в число:

(64<<24) + (233<<16) + (165<<8) + 94 = 1089054046
или более наглядный вариант:

(64*256*256*256) + (233*256*256) + (165*256) + 94 = 1089054046
В PHP такое преобразование делается вообще одной командой ip2long. Теперь подставляем найденное значение в ссылку вместо IP-адреса: закодированная ссылка на Google. Современные браузеры распознают такие подмены и при наведении курсора на ссылку показывают корректный IP-адрес, но можете посмотреть в исходном коде страницы и убедиться, что вместо IP-адреса там действительно стоит число. При клике по этой ссылке открывается главная страница поисковика. По таким ссылкам можно загружать файлы, открывать сайты, пересылать данные, делать все то же самое, что и с обычными адресами. Единственное условие, чтобы целевой ресурс однозначно сопоставлялся с конкретным IP-адресом.

Читать статью целиком »
Просмотров: 1510 | Комментариев: 3

Отмена AJAX-запроса

07.05.2018 | Категория: Web-мастеру и не только | Автор: ManHunter

Отмена AJAX-запроса

Вряд ли кто-то будет спорить, что технология AJAX для передачи данных - это очень удобно. В дополнение к предыдущим статьям я расскажу, как можно отменить AJAX-запрос. Зачем это надо? Пример из практики: есть карта, на видимую часть которой асинхронно подгружаются объекты. Пользователь перетаскивает карту, соответственно, на каждый новый видимый участок запрашивается новый список объектов. Иногда получается так, что запрос выполняется дольше, чем пользователь перемещает карту. Накапливается очередь из запросов на сервер, в свою очередь приводящая к очереди на отображение данных на клиентской стороне. Хотя правильно было бы показывать только результаты самого последнего запроса, а остальные запросы просто подавлять.

Читать статью целиком »
Просмотров: 1003 | Комментариев: 0

Таблица с колонками одинаковой ширины

29.04.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
Периодически возникающая задача на верстку: нужна таблица с колонками одинаковой ширины, при этом ни количество колонок, ни их содержимое заранее неизвестно. Решается эта задача всего двумя правилами CSS:
  1. .equal_table {
  2.     table-layoutfixed;
  3. }
  4. .equal_table td {
  5.     width:100%;
  6. }
Класс применяется к таблице, у которой надо сделать колонки одинаковой ширины, больше никаких действий не требуется.
  1. <table class="equal_table" style="width:600px;">
  2. <tr>
  3.     <td>первая</td>
  4.     <td>вторая</td>
  5.     <td>третья</td>
  6.     <td>а в этой колонке будет очень длинный текст</td>
  7. </tr>
  8. </table>
Готовый пример можете посмотреть на демонстрационной страничке.

Просмотров: 861 | Комментариев: 1

CSS: перечеркнутый по диагонали текст

10.04.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
Ранее я уже выкладывал статью о том, как можно сделать текст, перечеркнутый линией другого цвета. Там линия была строго горизонтально. Сегодня будет похожая задача, но только зачеркивающая линия будет проходить по диагонали.

Этот способ основан на применении абсолютно спозиционированного псевдоэлемента ::before, с помощью которого на текст накладывается цветная линия. Текстовое содержимое псевдоэлемента пустое, но при этом он растянут по всей ширине родительского элемента и смещен относительно его базовой линии.
  1. .striked {
  2.     positionrelative;
  3. }
  4.  
  5. .striked:before {
  6.     positionabsolute;
  7.     width100%;
  8.     height50%;
  9.     content'';
  10.     border-bottom4px solid #FF0000;
  11.     pointer-eventsnone;
  12. }
Угол и направление наклона линии регулируется дополнительными стилями:
  1. .up::before {
  2.     transformrotate(-5deg);
  3. }
  4. .down::before {
  5.     transformrotate(5deg);
  6. }
В коде HTML-страницы это выглядит примерно так:
  1.     <div><span class="striked up">Исправленному</spanверить.</div>
  2.     <div><span class="striked down">Исправленному</spanверить.</div>
Верстка абсолютно валидная, стили стандартные, поддерживаются всеми современными браузерами. В зависимости от места применения, вы можете отрегулировать цвет и толщину линии, а также угол ее наклона. Обратите внимание, что если применять этот эффект к многострочному тексту с переносами, то перечеркнутой окажется только первая строчка. Готовый пример вы можете посмотреть на демонстрационной странице.

Просмотров: 3153 | Комментариев: 2

prev 01 ... 04 05 06 07 08 09 10 ... 35 next
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2021
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.11 сек. / MySQL: 2 (0.0022 сек.) / Память: 4.75 Mb
Наверх