Обо мне

4X_Pro
4X_Pro
Живу в Сети с 25 ноября 2000 г.
Веду блог с 8 января 2011 г.

Контакты

Немного рекламы

Xpro.Su: заметки о жизни в Интернете

Mindmap как средство навигации по сайту

Сайтостроительство, Идеи и размышления 3 отзывов »

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

Но все эти противоречия можно устранить, если использовать для навигации mindmap (иногда их еще называют "ассоциативными картами"). Mindmap — это изображение, показывающее между собой связь различных понятий, используемая для облегчения изучения и запоминания чего-либо нового. Как правило, в центре его располагается ключевое понятие (тема сайта), от которого расходятся связи к более частным (разделам сайта), а от них к еще более частным (подразделам или конкретным статьям). Каждое понятие можно обозначить как просто словом, так и добавить к нему небольшую картинку для большей наглядности. Нарисовать такой mindmap можно сначала от руки еще на самом начальном этапе проектирования сайта. Это, помимо всего прочего, поможет лучше продумать его структуру.

Техническую реализацию этой идеи я вижу так: изначально в правом верхнем углу сайта находится уменьшенная картинка mindmap, причем она выводится с position: fixed, то есть даже при прокрутке сайта вниз остается на экране на том же самом месте и доступна в любой момент. По щелчку мыши по ней разворачивается полная версия mindmap, содержащая кликабельные области, щелчок по которым приводит к переходу в соответствующий раздел. (Области могут быть произвольной формы, это легко реализуется с помощью тегов map и area.)

Из недостатков такой идеи можно выделить три:

  • немного увеличивается объем работы над сайтом, а также возникает необходимость использовать специальные программы для генерации тегов area;
  • при добавлении новых разделов mindmap придется дорисовывать, поэтому такое решение подходит, в основном, сайтам, структура которых особо не меняется;
  • неудобство для пользователей, заходящих с мобильных устройств с низким разрешением (но таковых можно отслеживать с помощью JavaScript и показывать им уменьшенную и упрощенную версию картинки).

Но с другой стороны, хорошо продуманный и красочный mindmap не только покажет пользователю все что есть на сайте, но и станет одним из самых запоминающихся элементов, выделяющих его среди прочих, своего рода лицом сайта. Но помните: mindmap — это расширение традиционной навигации, но не полная ее замена, и не следует полностью отказываться от таких элементов как указатель текущего местоположения ("хлебные крошки") или главное меню.

Загрузка JavaScript по имени класса

Web-программирование, Сайтостроительство, Ускорение сайтов Оставить отзыв »

В прошлом сообщении я рассказал о том, как сделать загрузку JavaScript и CSS полностью асинхронной на примере простого сайта всего с двумя файлами скриптов. На практике же гораздо чаще встречаются ситуации, когда на сайте используется несколько различных скриптов, причем они различаются для разных страниц сайта. Допустим, у нас есть сайт, на котором мы хотим показывать изображения в lightbox, страницы с формой комментария, для которых мы хотим показать WYSIWYG-редактор, и несколько форм, где нужно ввести дату. Рассмотрим несколько вариантов, как можно организовать загрузку скриптов.

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

HeadJS или полностью асинхронная загрузка сайта

Web-программирование, Сайтостроительство, Ускорение сайтов 2 отзывов »

Один из самых важных показателей для современного сайта -- как можно более быстрая загрузка и начало показа содержимого. Чтобы этого достичь, нужно устранить задержки, связанные с ожиданием подгрузки внешних ресурсов, сделав их асинхронными. Прежде я уже писал, как можно сделать асинхронными виджеты социальных сетей. Но недавно я нашел скрипт, который позволяет сделать асинхронной загрузку всех JavaScript и CSS-файлов, используемых на сайте. Называется он HeadJS, и кроме асинхронной загрузки имеет умеет еще делать feature detection, с помощью чего можно загружать скрипты выборочно в зависимости от возможностей устройства, с которого зашел пользователь.

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

Yaml Form Generator -- простое и быстро создание форм для PHP

Web-программирование Оставить отзыв »

В прошлом году, работая над одним проектом, задумался, сколько же времени уходит на то, чтобы сделать качественные формы: нужно сверстать форму на HTML, сделать валидацию формы на стороне клиента, а потом и на стороне сервера, а для некоторых типов данных выполнить еще ряд действий: преобразовать дату в Unix Timestamp и обратно, обработать ситуацию "снятый checkbox", проверить, что злоумышленник не добавил каких-то своих полей. Поскольку все эти действия весьма рутинны, и я задумался над тем, можно ли их как-то автоматизировать, причем так, чтобы форма целиком и полностью описывалась в одном месте.

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

Как скрыть уведомления в Skype

Разное, Личная эффективность 2 отзывов »

Не раз сталкивался с тем, что когда я вхожу в какой-то многолюдный групповой чат в Skype, постоянно появляющиеся уведомления о новых сообщениях очень мешают. Сегодня узнал, что существует возможность их отключить: нужно ввести в окно сообщения команду /alertsoff (аналогично IRC), и уведомления в панели задач перестанут появляться. Включить их обратно можно с помощью /alertson.
Кроме того, существуют команды для управления групповым чатом: /setrole логин MASTER (сделать админом, может выполнять только админ), /showmembers (показать права участников), /kick, /kickban и еще несколько.

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

Web-программирование 4 отзывов »

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

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

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

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

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

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

Сайтостроительство, Инструменты веб-мастера Оставить отзыв »

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

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

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

Разное Оставить отзыв »
Недавно узнал, что с помощью 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, будем использовать его 

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

Сайтостроительство 7 отзывов »

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

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

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

Разное 1 отзыв »

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

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