Обо мне

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

Контакты

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

Рубрика: "Сайтостроительство" - Xpro.Su: заметки о жизни в Интернете

Рубрика: "Сайтостроительство"

Доступ к MySQL на VDS через SSH-туннелирование

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

Думаю, многие обладатели VDS сталкивались с такой проблемой: на VDS запущен MySQL, висящий только на localhost и недоступный снаружи из соображений безопасности, и нужно внести какие-то изменения в базу. Приходится либо подключаться по SSH и работать через консольный клиент (что далеко не всегда удобно), либо ставить phpMyAdmin. Но есть и другой способ: использовать SSH-туннелирование, и пробросить порт MySQL-сервера с VDS на локальный компьютер. Через командную строку это делается следующим образом:

ssh -L локальный_порт:localhost:удаленный_порт логин@сервер

где локальный порт — номер порт на домашнем компьютере, удаленный порт — порт на сервере.
То же самое можно сделать и через SSH-клиент PuTTY. Заходим там в настройках соединения в Connection/SSH/Tunnels, вводим в source port номер локального порта (например, 3307), в destanation — localhost и удаленный порт (localhost:3306), и нажимаем "Add". Соединяемся с сервером, запускаем на своем компьютере локальный SQL-клиент (например, HeidiSQL) и в настройках соединения ставим localhost 3307. И все, база на VDS теперь так же легко доступна, как база на домашнем компьютере!

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, с помощью чего можно загружать скрипты выборочно в зависимости от возможностей устройства, с которого зашел пользователь.

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

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

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

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

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

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

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

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

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

Особенности обработчика отправки формы при использовании addEventListener

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

Чтобы провести проверку формы перед ее отправкой, нужно повесить обработчик на событие onsubmit для тега форм и вернуть false в случае ошибки. Если делать это прямо в HTML-коде (т.е. <form action="" onsubmit="">) или с помощью свойства onsubmit через JavaScript, то все работает без проблем. Но если попытаться сделать то же самое через addEventListener, то без дополнительных мер форма отправляется в любом случае.

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

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

Размер шрифта и поведенческие факторы

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

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

Сжимающаяся шапка сайта

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

Однажды мне потребовалось сверстать дизайн, в котором шапка по ширине была ощутимо шире основной части сайта: общий дизайн был рассчитан на ширину 990px, а шапка имела размер 1160x306 пикселей. Встал вопрос: что же делать при разрешении в 1024px. Оставлять полосу горизонтальной прокрутки мне сильно не хотелось, и поэтому стал искать решение, как сделать, чтобы от шапки в таких ситуациях показывалась центральная часть, а края -- пропадали. И в итоге найдено было вот такое решение:

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

jsImageBox -- легкий аналог lightbox без jQuery

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

Делал сегодня фотогалерею для одного из своих сайтов, и потребовался скрипт, который показывал бы фотографию во всплывающей рамке с затемнением фона (так называемый lightbox), причем так, чтобы можно было просматривать сразу целую серию фотографий, переходя от одной к другой. Оригинальный lightbox не подходил именно по причине отсутствия поддержки серий, а его вторая версия использует jQuery. Для того сайта мне покзалось это слишком тяжелым решением, и я стал искать легкий скрипт, не требующий больших библиотек. И такое решение было найдено: jsImageBox, в сжатом виде занимающий всего 9 Kb.

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