Обо мне

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

Контакты

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

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

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

Немного о юзабилити таблиц

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

Часто при разработке CMS требуется вывести таблицу с какими-то элементами, которые можно выбирать и редактировать (например, список страниц сайта или список вопросов в FAQ). Казалось бы, что проще: достаточно использовать всего три тега — table, tr, td и все. Однако если список будет длинный, да еще названия элементов могут быть длинными и растягиваться на несколько строчек, то пользоваться такой таблицей будет не очень удобно. Можно дать несколько советов, как сделать такую таблицу более удобной.

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

Загрузка JavaScript-библиотек с Google Loader

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

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

К этой же мысли пришли и в Google, создав Google Loader API. Работает он следующим образом: на сайт подгружается небольшой JavaScript, который может загружать  jQuery, jQuery UI, Google Maps, SFWObject, Prototype и еще несколько известных библиотек прямо с серверов Google.

Это дает целый ряд преимуществ:

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

Pixlr -- редактируем фото онлайн

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

Каждый, кто делал сайт с возможностью загрузки фото или хотя бы аватаров, наверное, задумывался о том, что хорошо бы сделать возможность пользователю отмасштабировать или обрезать фото прямо онлайн. Недавно я нашел весьма интересное решение: онлайн-редактор Pixlr, сделанный на Flash. По возможностям он мало уступает ранним версиям Photoshop (есть все те же основные инструменты, поддержка слоев, фильтров, которые были в Photoshop 7). Кроме того, имеется и более простая версия Pixlr Express, которая позволяет применить набор эффектов (изменение размера, обрезка, коррекция красных глаз, изменение баланса белого и т.п.) к изображению. Открывать в редакторе можно изображения как с URL, так и со своего компьютера в форматах JPG,  TIFF, PSD, PNG и других.

Самый простой способ подключить редактор к своему сайту -- открывать его в IFRAME. Но в этом случае пользователю  придется сохранять отредактированный файл на свой компьютер, а потом грузить его на сайт. Неудобно. Поэтому лучше использовать Pixlr API для открытия и сохранения файлов прямо на сайт. API очень прост в освоении:

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

Свой сайт: с чего начать?

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

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

Поэтому я решил предолжить небольшой план, которого придерживаюсь сам при работе над сайтами:

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

Блок высотой на всю страницу и фиксированный "подвал" снизу

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

Давно хотел разобраться, как верстать сайт с блоком, который будет растягиваться по высоте на всю страницу, и наконец-то это сделал. Как выяснилось, все просто: нужно и тегу body, и тегу html указать в стиле высоту 100%, а после этого задать для нужного блока height: 100%, или min-height: 100%, если требуется растягивать блок по вертикали при большом объеме контента.

Но мне требвалось не только сделать такой блок, но и разместить внизу "подвал" так, чтобы он был всегда снизу и имел фиксированную высоту в пикселях. Причем была возможна ситуация, когда в основном блоек контента окажется больше, чем на одну страницу, и в этом случае "подвал" должен оказаться после его окончания (т.е. вариант со стилем position: absolute; bottom: 0 для подвала не подходил).

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

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

Как выглядит профессиональный сайт

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

Изучая сайты различных фирм, как-то обратил внимание, что некоторые из сайтов в течение буквально первых 5-10 секунд воспринимаются как профессионально сделанные, в то время как другие -- нет. Причем эта профессиональность напрямую не связана с эстетичностью дизайна: бывают сайты красивые, но не профессиональные, а бывает и наоборот.

Я попытался определить, в каких случаях сайт воспринимается как профессионально сделанный, и выделил следующие признаки:

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