Портрет 4X_Pro
Онлайн
Мультиблог
4X_Pro
Записки лишнего человека

Компьютерное

Безопасное скачивание с сервера с сохранением имен файлов

4X_Pro

Занимаюсь сейчас разработкой форумного движка и столкнулся с необходимостью сделать возможность прикреплять к сообщениям файлы. Сама закачка файлов на сервер тривиальна, но нужно, во-первых, сделать так, чтобы при скачивании предлагалось то же самое имя файла, под которым его загрузили, во-вторых, чтобы файл могли скачать только те, у кого есть доступ в соответствующий раздел, то есть нельзя было бы угадать его по номеру.

Наиболее очевидный вариант — написать PHP-скрипт, который проверял бы ключ и потом отдавал файл через какой-нибудь fpassthorugh, мне не нравился: во-первых, долго писать обработку частичной докачки, во-вторых, есть шансы превысить лимиты по времени выполнения и памяти. Стал искать способ, как обойтись средствами самого Apache. В принципе, это было бы не особо сложно, если бы не необходимость выдавать файлы под теми же именами, под которыми их и закачивали. Очевидно, что хранить файлы на сервере под этими именами, неприемлемо: во-первых, пользователи часто используют имена файлов кириллицей, что может породить массу проблем при не настроенной локали и переносе сайта с одного сервера на другой, во-вторых, возможны проблемы с безопасностью.

И оказалось, что эту проблему очень легко можно решить следующим образом: при закачке для каждого файла генерируется номер, под которым он сохраняется в базу, и уникальный ключ (MD5-хеш от ряда параметров и случайного числа). Файл сохраняется под именем номер-ключ.dat, и на него дается ссылка вот такого вида: /files/номер-ключ/имя_файла_при_загрузке. А дальше с помощью mod_rewrite задается следующее правило:

RewriteRule ^downloads/(\d+\-[0-9a-z]+)/.+$ downloads/$1.dat [L]

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

Почему Яндекс не индексирует сайт

4X_Pro

Иногда при создании сайта бывает так, что вроде бы и контент полезный и уникальный, и сайт сделан качественно, однако поисковые системы (особенно Яндекс) не хотят его индексировать. Отчего такое может быть? Скорее всего, на сайте есть проблемы технического характера, которые с пользовательской точки зрения не видны. Далее будут описаны некоторые наиболее типичные проблемы, из-за которых сайт может не индексироваться.

Читать далее…

Говорящий скрипт на WSH

4X_Pro
Недавно узнал, что с помощью WSH можно буквально в несколько строчек кода научить компьютер произносить ту или иную фразу с помощью Microsoft Speech API (SAPI), что может быть полезно, например, для того, чтобы сообщить о завершении выполнения. Делается это примерно так:
var V=new ActiveXObject('SAPI.SpVoice'); // создаем объект SAPI
V.Speak('All done!'); // метод Speak произносит нужный текст.
К сожалению, по умолчанию в Windows не установлено голосов, поддерживающих русский язык, поэтому придется либо писать текст транслитом (и произноситься он будет с весьма смешным акцентом), либо искать и ставить их самостоятельно.
Выбрать другой голос можно с помощью следующего кода:
var voices=V.GetVoices(); // получаем список доступных голосов
if (voices[1]) V.Voice=voices[1]; // если установлен голос с номером 1, будем использовать его

Масштабирование широкого сайта для низких разрешений экрана

4X_Pro

Однажды столкнулся с дизайном, который был сделан так, что минимальная ширина составляла около 1350 пикселей. Естественно, на экранах с разрешением 1280px и ниже он не влезал по ширине, что не устраивало заказчика, при этом на вариант с переменной шириной, где меню и некоторые другие элементы выводились бы в две строки, заказчик также не соглашался. Пришлось воспользоваться масштабированием с помощью свойства CSS 3 transform: scale, сделав небольшой Javascript, который рассчитывал необходимый масштаб:

Читать далее…

Как увеличить время работы телефона с Android

4X_Pro

Некоторое время назад решил заняться настройками своего телефона на Android (Sony Ericsson Neo V) для того, чтобы увеличить время работы без подзарядки. Удалось достичь весьма неплохих результатов: вместо двух суток работы в режиме ожидания телефон стал выдерживать пять-шесть дней (при условии переключения на ночь в полетный режим), и решил описать, как я этого добился. Читать далее…

Настройка suexec под Debian

4X_Pro

Недавно потребовалось на своем VDS с Debian 7 создать отдельного пользователя и предусмотреть для него возможность запуска скриптов от его имени. Как выяснилось, это не особо сложно:

Читать далее…

SEO для форума: участие в конкурсе

4X_Pro

Решил поучаствовать в конкурсе на форуме WebMasters и написал статью по теме "SEO для форумов", собрав в одно место все свои идеи по улучшению форумов с точки зрения SEO. К сожалению, по правилам конкурса копирование статьи запрещается, поэтому приходится ограничиться ссылкой.

UPD: по итогам конкурса занял 14-ое место (всего призовыми являются первые пятнадцать) и выиграл 50 WMZ.

Инструменты для оптимизации скорости загрузки сайта

4X_Pro
Недавно узнал о нескольких полезных сервисах, которые могут помочь при оптимизации скорости загрузки сайта. Вот они:
  • CSS Sprites Generator — отличный генератор CSS-спрайтов (то есть файлов изображений, которые объединяют в себе несколько фоновых картинок для уменьшения количества обращений к Web-серверу). Поддерживает форматы GIF, JPEG, PNG, позволяет задавать отступы между спрайтами. Имеется собственная API. Единственный недостаток — нет возможности задать горизонтальное расположение картинок в спрайте вместо вертикального.
  • TinyPNG — онлайн-сервис преобразование полноцветных PNG в 8-битные с минимальной потерей качества изображений. Во многих случаях позволяет уменьшить размер файлов на 60-70%. Также доступна собственная API.
  • WebPageTest — измерение скорости загрузки Web-страницы с построением графиков загрузки файлов, измерением времени первой отрисовки, события DomContentReady, полной загрузки. Есть возможность измерения для различных броузеров и различных местоположений.

В частности, эти инструменты пригодились при оптимизации сайта Островные павильоны.

Полезные советы при работе над сайтами

4X_Pro
Давно накапливаются мелкие советы по увеличению производительности при работе над сайтами при верстке или HTML-программировании, и вот наконец-то решил собрать их в одно сообщение.

  1. Если вы часто редактируете по FTP какой-либо сайт, не поленитесь прописать в настройках FTP-клиента тот каталог, в котором находятся непосредственно файлы сайта в качестве remote directory (чаще всего таковым бывает public_html или www). В этом случае при подключении к серверу вы сразу будете оказываться в нем, а не в корне, как это бывает по умолчанию, и сэкономите пару секунд.
  2. Если вы используете Filezilla, то в нем есть очень удобная опция Use syncronized browsing (задается в настройках соединения на вкладке Advanced), которая приводит к одновременной смене локального каталога и каталога на сервере. Если правильно настроить local и remote directory, использование этой опции упростит перемещение по каталогам и синхронизацию файлов.
  3. Также для удобства выгрузки исправленных файлов на сайт полезно поставить сортировку по времени последнего изменения, в этом случае те файлы, которые были изменены и должны быть выгружены на сайт, окажутся в начале списка.
  4. При верстке под Linux очень удобно использовать два рабочих стола: на одном помещается броузер, а на другом — HTML-редактор, и переключаться между ними по быстрым клавишам (в LXDE это Alt+Shift+Left и Alt+Shift+Right соответственно). В отличие от Alt+Tab, где лишнее нажатие или переключение в другую программу меняет порядок окон, рабочие столы всегда остаются в одном и том же порядке. В Windows тоже возможно сделать несколько виртуальных рабочих столов, но это потребует дополнительного программного обеспечения.
  5. В Google Chrome есть функция "Просмотр кода элемента" (для этого нужно щелкнуть по любому элементу правой кнопкой и выбрать одноименный пункт в меню). Откроется просмотр структуры HTML, в котором можно менять свойства CSS "на ходу", без перезагрузки страницы. Это очень удобно при подборе margin, padding, top, left и тому подобных свойств: не нужно каждый раз переключаться в HTML-редактор, сохранять файл и обновлять страницу, чтобы посмотреть, что получилось, а можно сначала попробовать разные значения, выбрать их, а потом уже исправить CSS-файл.
  6. Почти все современные двухпанельные файл-менеджеры наподобие Total Commander поддерживают работу с несколькими вкладками. И этим можно пользоваться при внесении правок в сайт со сложной структурой: на одной вкладке открывается каталог с кодом, на другой — с CSS или JavaScript, на третьей — с шаблонами. Это оказывается гораздо удобнее, чем постоянно ходить из каталога в каталог. (Ну или как вариант — поставить программистский редактор с поддержкой проектов, например, jEdit с соответствующим plugin).
  7. Не лишним будет либо освоить жесты мышью, особенно часто требуются "Назад" и "Обновить", так как при верстке они требуются чаще всего. Обычно "Назад" — это движение влево, а "Обновить" — вверх-вниз, оба жеста выполняются при зажатой правой кнопке мыши. В Opera эти жесты встроенные, для других броузеров придется ставить специальные расширения, например, Smooth Gestures. Другой вариант — купить пятикнопочную мышь и переназначить дополнительные кнопки с помощью специальной программы.
  8. Также хорошей идеей будет расположить Панель задач не снизу, а слева, особенно на мониторах с соотношением сторон 16:9 и 16:10. Во-первых, это даст больше места по вертикали (в том числе и для просмотра Web-страниц), во-вторых, сократится путь курсора мыши для переключения между окнами, а в сами кнопки окон будет легче попасть.

Вот и все на сегодня, надеюсь эти советы помогут при работе!

Checkbox большого размера

4X_Pro

Недавно потребовалось сверстать страницу, на которой у элемента checkbox был бы увеличен размер. Варианты с рисованным checkbox, который переключался бы с помощью JavaScript для меня изначально были неприемлемы Сначала пытался воздействовать на него с помощью font-size, line-height, padding и border, но ничего из перечисленного не помогло. Потом обнаружил, что свойства height и width, выставленные одновременно, позволяют добиться желаемого. Но увы, оказалось, что только в Google Chrome. В результате пришлось воспользоваться воспользоваться свойством transform из CSS 3: <input type="checkbox" style="transform: scale(2)" />, но при этом сам checkbox становится размытым.

Поэтому тем, кому валидность CSS не критична, посоветовал бы делать несколько иначе:

.bigbox { -ms-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2); height: 28px; width: 28px }

Такой подход позволит отрисовывать checkbox в Google Chrome нужного размера, а в остальных броузерах — масштабировать с размытием.

Обновлено в мае 2018: теперь свойства height и width работают во всех броузерах, включая Firefox. Можно ограничиться ими:

.bigbox { height: 28px; width: 28px }

Страницы:
Задать вопрос

Здесь можно задать мне вопрос или спросить совета по любой теме, затронутой в блогах или на форуме. После того, как я отвечу, вопрос и ответ появятся в соответствующем разделе. Но не забываем, что я — сторонник slow life, поэтому каких-либо сроков ответов не обещаю. Самые интересные вопросы станут основой для новых тем на форуме или записей в блоге.
Сразу предупреждаю: глупости, провокации, троллинг и тому подобное летит прямо в /dev/null.