Многоколоночная верстка с помощью CSS. Руководство для web разработчиков.

Владимир | | Разное.

логотип к etutorialБуквально на днях закончил два небольших проекта.

Во-первых, дописал eBook «Многоколоночная верстка». В нем привел самые, на мой взгляд, удобные приемы создания web страниц с двумя и тремя колонками.

Руководство ориентировано преимущественно на начинающих web разработчиков. Поэтому все примеры довольно простые и с подробным описанием. В тоже время, это не учебник по CSS и HTML.

Скачать eBook и примеры можно абсолютно бесплатно на сайте etutorials.simplecoding.org.

Во-вторых, запустил бета версию сайта etutorials.simplecoding.org. Сайт задуман как сборник руководств и примеров по программированию и web разработке. На данный момент на сайте всего одно руководство («Многоколоночная верстка») с примерами.

Первоначально планировал размещать только свои собственные материалы. Но если есть предложения добавить что-нибудь еще, пишите на eMail. Единственное условие – материалы должны быть ваши собственные, т.е. сканированные книги на сайте размещаться не будут.

Кстати, сайт написан на PHP с использованием Code Igniter. О работе с этим фрэймоврком я запланировал целую серию статей (надеюсь, руки дойдут еще в этом году 🙂 ).
Сейчас скажу только, что Code Igniter оставил очень приятные впечатления. Безусловно, свои недостатки есть, но они довольно легко исправляются. А вот удобство использования и возможности настройки заслуживают самой высокой оценки.

Важно. На данный момент сайт собственной RSS ленты не имеет. Поэтому анонсы новых поступлений будут идти через ленту этого блога.

Интересно почитать

Эпидемиология и гигиена в Республике Беларусь

CSS верстка. Создание страницы с тремя разноцветными колонками.

Владимир | | CSS, HTML.

Страница с тремя колонками, выделенными цветомСегодня мы продолжим эксперимент с раскрашиванием колонок web страницы. В прошлый раз мы создали страницу с тремя колонками и задали для центральной колонки один фоновый цвет, а для правой и левой – другой.

Естественно, не очень удобно, что боковые колонки всегда одного и того же цвета. Исправляем этот недостаток.
Читать дальше

CSS верстка. Раскрашиваем колонки на странице.

Владимир | | CSS, HTML.

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

Нам нужно чтобы центральная колонка имела один цвет фона, а правая и левая – другой.

Решить задачу «в лоб», т.е. воспользоваться свойством background-color каждой из колонок, не получится. Так как колонки неодинаковой высоты, которая может изменяться, и заранее неизвестна. А фон, естественно, должен распространяться на всю высоту колонки, от заголовка до хвостовика.
Читать дальше

Web разработка. Ajax без JavaScript?

Владимир | | Ajax, JavaScript, PHP.

картинка xajax
Можно ли написать web приложение, использующее Ajax, без JavaScript? Правильный ответ: «Нельзя. Потому что сама технология ajax основана на запросах, которые отправляются с помощью JavaScript». Но, кто сказал, что мы должны писать JavaScript код сами? Похоже, разработчики библиотеки xajax думали именно так.

Прежде всего, разберем, что представляет собой xajax. Это PHP библиотека, предназначенная для упрощения работы с ajax. Принцип работы заключается в том, что JavaScript код генерируется автоматически, а вы с помощью php функций указываете, где его разместить.
Читать дальше

Небольшой плагин WordPress для создания полнотекстовой RSS ленты

Владимир | | WordPress, Разное.

Настройка RSS
Недавно я решил изменить формат RSS ленты и отправлять в нее полный текст постов. Решение, конечно, не оригинальное 🙂 . Но при его реализации я столкнулся с небольшой проблемой.

Дело в том, что в постах я использую тег <!--more-->, который разбивает пост на две части: аннотацию и основное содержание. Это позволяет отображать на главной странице блога только названия с аннотациями. Но при этом, записи в ленте новостей тоже обрезаются по этому тегу. Удалить тег я не могу, потому что тогда главная страница становится ну ооооочень длинной 🙂 .

Как оказалось, у этой проблемы есть очень простое решение. Нужно просто установить плагин Full Text Feed, который отправляет в ленту все содержание поста независимо от тега <!--more-->. Настройки плагин не требует.

Все-таки приятно, что кто-то заботится о таких «мелочах».

P.S. Вторая новость. Я начал играть в blogowar.
Если кто-то играл, пожалуйста, поделитесь впечатлениями.

Интересно почитать

Решение различных задач по теплотехнике и термодинамике

Небольшой список хороших форумов о программировании

Владимир | | Разное.

картинка для форумов
Форумы – это, наверное, самое неоднозначное явление в Сети. С одной стороны, можно без усилий получить ответ на свой вопрос, с другой – “не все ответы одинаково полезны” 🙂 , приходится уходить с форума и читать учебник 😕 .

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

Web разработка. Добавляем всплывающие подсказки на страницу.

Владимир | | CSS, HTML, JavaScript.

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

Сегодня я расскажу о JavaScript библиотеке, которая позволяет легко решить эту задачу. Называется она Prototip и состоит всего из одного файла prototip.js. Только учтите, что Prototip, по сути, является надстройкой над другой библиотекой – prototype (о которой я уже неоднократно рассказывал), поэтому без нее он работать не будет.

Прежде всего, разберемся, что представляет собой всплывающая подсказка.
Обычно это блок с текстом или картинкой, который появляется, когда вы наводите курсор на определенный элемент страницы.
Чтобы этот блок двигался вместе с курсором, для него в таблице стилей устанавливают абсолютное позиционирование, и с помощью javascript меняют координаты при перемещении мышки.
Естественно, такой блок может содержать практически любую html разметку с текстом, картинками, баннерами, flash роликами и т.п.

Переходим к созданию подсказок
Качаем библиотеку с официального сайта. В архиве вы найдете две папки:
js/ — в ней находятся два файла prototip.js и prototype.js, т.е. все необходимое для работы;
css/ — здесь размещены: файл с таблицей стилей и несколько картинок, которые используются для создания стандартных подсказок.

После этого подключаем файлы библиотек к странице:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/prototip.js"></script>

Если вы хотите использовать обычные подсказки, то подключите файл с таблицей стилей из папки css. Но, в большинстве случаев, лучше использовать свои собственные стили (так больше шансов, что подсказка впишется в дизайн сайта 🙂 ).

Теперь делаем простенькую страничку:

<p>
При наведении курсора мыши на <em><span id="needtip">этот текст</span></em>
будет появляться обычная текстовая подсказка.
</p>
<p>
А при наведении на <em><span id="cloudtip">этот текст</span></em> появится
графическая подсказка.
</p>

Как видите, она состоит из двух абзацев, в каждом из которых есть фраза, выделенная тегами <span id="…"></span>. Вместо тега <span> можно использовать любой другой, главное указать id элемента.

Для фразы в первом абзаце (id="needtip") сделаем простую текстовую подсказку. Для этого создаем файл simpletip.js, подключаем его к странице:

<script type="text/javascript" src="simpletip.js"></script>

И добавляем в него обработчик события window.onload (таким образом, наш код будет автоматически выполняться при загрузке страницы).
Читать дальше

Web разработка с использованием Prototype и Scriptaculous. Управление эффектами.

Владимир | | HTML, JavaScript.

Управление эффектами (картинка)
Библиотека Scriptaculous содержит массу красивых и полезных эффектов, которые удобно использовать в web приложениях. О некоторых из них я уже писал в предыдущих статьях (например, Подсветка элементов web страницы и Использование Scriptaculous для изменения прозрачности элементов web страницы). Любой из этих эффектов представляет ценность сам по себе, но только использование их комбинаций позволяет раскрыть возможности библиотеки в полной мере.

В этой статье я расскажу, как создавать группы из нескольких эффектов и управлять их выполнением.

Прежде всего, немного теории. Scriptaculous позволяет применить несколько эффектов к одному и тому же блоку web страницы двумя способами:
1) последовательно (эффекты будут применяться по очереди);
2) параллельно (т.е. все выбранные эффекты будут работать одновременно).

Рассмотрим небольшой пример. Допустим, у нас есть web страница с текстовым блоком, к которому мы хотим применить два эффекта:
1) подсветки (Highlight);
2) и перемещения (MoveBy).

Разметка страницы предельно простая:

<body>
<div id="textBlock">…</div>
<p><input type="button" id="runParallel" value="запустить параллельно" onclick="runParallel()" /></p>
<p><input type="button" id="runSerial" value="запустить последовательно" onclick="runSerial()" /></p>
</body>

Как видите, страницы содержит один блок (textBlock) и две кнопки, нажатия на которые вызывают javascript функции runParallel() и runSerial(). Эти функции будут запускать наши эффекты параллельно и последовательно.

Теперь представим, что мы написали такой код:

new Effect.Highlight('textBlock', {startcolor:"#DFDC00", endcolor:"#FFFFFF", duration: 2});
new Effect.MoveBy('textBlock', 0, 100, {duration: 2});

Как вы думаете, в каком порядке они будут выполнены?
Правильный ответ: “В большинстве случаев параллельно”. Почему в “большинстве случаев”? Потому что, если мы не задали последовательность выполнения явно, то она может зависеть от браузера.

Отсюда простой вывод: “Если используете несколько эффектов, всегда указывайте, в каком порядке их выполнять”.
Читать дальше

Что включить в RSS ленту?

Владимир | | Разное.

RSS вопрос
Недавно я проводил собственное мини исследование RSS лент различных сайтов и блогов. И выяснилась интересная закономерность. Практически все крупные порталы включают в ленту только анонсы статей. В отличие от них, многие небольшие сайты и блоги отправляют читателям полный текст вместе с рисунками, флеш роликами и т.п.

Однозначно определить какой из этих подходов лучше практически невозможно.

С одной стороны, многие люди читают блоги только с помощью RSS ридеров. Для них интереснее получать полный текст, потому что это позволяет не «прыгать» на сайт.

С другой стороны, за счет этих «прыжков» растет посещаемость сайта. И, кроме того, страницы в RSS ридере практически всегда выглядят хуже, чем «в оригинале», особенно если содержат сложное форматирование. Например, у меня установлен плагин для подсветки кода. Естественно, эта подсветка не работает в RSS ленте (во всяком случае не во всех RSS ридерах).

Так что, для себя я сделал простой вывод. Не большой пост лучше отправить в RSS ленту целиком. Если он кого-то заинтересует, то человек все равно зайдет на сайт что бы сохранить его или оставить комментарий. Но, если пост больше напоминает многостраничную статью с кучей рисунков, таблиц, блоков кода, то, наверно, правильнее будет сделать небольшую аннотацию и отправить в ленту только ее.

Кстати, оказалось, что лента этого блога далеко не лучшая. Учитывая, что я почти не уделял ей внимания, в этом нет ничего удивительного. Естественно, я постараюсь исправить ситуацию, честное слово 😎 .

Я хочу подчеркнуть, что все сказанное, это моя личная точка зрения. Замечания, советы (желательно полезные и аргументированные 🙂 ) и вопросы оставляйте в комментариях.

Постовой

Вспомним детство. Смотрим мультфильмы online.

Web разработка. Делаем стильные html формы.

Владимир | | CSS, HTML.

Сложно представить современный интернет без форм для ввода данных. Они повсюду. Практически все web сервисы требуют авторизации или, как минимум, ввода имени и адреса email. Для ускорения работы с формами существуют специальные программы, многие браузеры имеют функцию автозаполнения…. Но сегодня речь не о них.

Мы посмотрим, как сделать обычную html форму удобнее для посетителей. И, кроме того, сделаем ее доступной для программ чтения с экрана, текстовых браузеров и тому подобного софта.
Читать дальше