Web-программирование \ PHP

События касания на веб-страницах

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

Тот факт, что этот переход работает так гладко – немного из области чудес, и позволяет таким моделям взаимодействия, как CSS 3D Origami, отвечать одинаково хорошо на касание пальцем или движение курсора, не требуя при этом дополнительного кодирования.

Продолжить чтение

Премиум \ PHP \ Регулярные выражения

Регулярные выражения

От автора: в этом уроке мы с Вами познакомимся с метасимволами символьных классов. Еще их называют обобщающими символьными классами. Данные метасимволы несколько сокращают запись шаблона, поскольку заменяют собой один или несколько символьных классов. Также мы рассмотрим использование символьных классов POSIX. Последний вопрос рассмотрен исключительно в ознакомительных целях, поскольку на практике символьные классы POSIX практически не используются.

По результатам урока Вы узнаете о метасимволах символьных классов, научитесь их использовать, а также узнаете о нюансах их использования. Кроме того, Вы узнаете о символьных классах POSIX.

Продолжить чтение

Верстка \ HTML&CSS

Многоуровневое выдвижное меню

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

Сегодня мы хотим поделиться с вами еще одним экспериментальным меню. Конечно, вы уже знакомы с так называемой off-canvas-навигацией (скрытой и открывающейся по требованию, например, при нажатии на кнопку) в мобильных приложениях и его реализацией для адаптивных вебсайтов вроде этого, созданного Дэвидом Бушелом (David Bushell). Мы пытались исследовать возможность создания вложенного многоуровневого меню, что могло оказаться весьма кстати для меню с большим количеством контента (такого, как навигация онлайн-магазинов). Результатом стало «выдвижное» меню, способное (теоретически) содержать бесконечные вложенные подменю. При открытии подуровня навигации все содержимое сдвигается еще больше, при этом видимым остается кусочек родительского меню. На выбор – его можно оставить видимым, а можно убрать, в таком случае подменю просто закроет родительский элемент.

Продолжить чтение

Верстка \ HTML&CSS

Изящный выскальзывающий футер сайта

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

Продолжить чтение

Премиум \ PHP \ Создание доски объявлений на PHP

Создание доски объявлений

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

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

Продолжить чтение

Верстка \ HTML&CSS

Применение пользовательских атрибутов данных и псевдоэлементов

От автора: Учебник о том, как (зло)употреблять пользовательские атрибуты данных и псевдоэлементы для создания привлекательных изображений-заголовков.

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

Продолжить чтение

Верстка \ Адаптивная верстка

Меню как в Facebook’е (адаптивное)

От автора: несомненно, адаптивная технология становится все более популярной. Она позволяет нам сэкономить время при разработке дизайна, предназначенного для применения на множестве устройств: от мобильных до широкоэкранных компьютеров. Не нужно разрабатывать отдельные версии сайта для каждого формата (устройства). Сегодня мы создадим новое адаптивное меню, которое выглядит, как в facebook’е. Для его создания не понадобится javascript, все выполняется с помощью одного CSS3 (для IE7-IE10, Firefox, Opera, Safari, Chrome и iPad/iPod/iPhone).

Продолжить чтение

Javascript & Ajax \ Javascript

Чем дальше web, тем больше JavaScript-а

От автора: «Что нужно знать, чтобы реализовать такое, как тут (ссылка)?» — именно такой вопрос часто встречается на нашем форуме в службе поддержки или приходит к нам на e-mail.

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

В данной статье я расскажу вам о JavaScript — скриптовом языке, предназначенном для создания интерактивных веб-страниц, и о том, что можно делать с помощью JS. Мы рассмотрим примеры использования JavaScript и узнаем, чем он может быть нам полезен.

Продолжить чтение

Премиум \ PHP \ Регулярные выражения

Регулярные выражения

От автора: данный урок посвящен работе с непечатаемыми или пробельными символами. Будут рассмотрены только наиболее часто используемые из них – пробел, табуляция и перевод строки. Основной акцент в уроке сделан на нюансы работы именно с последним из группы пробельных символов – переводом строки. Рассмотрены особенности обозначения данного символа в зависимости от операционной системы.

По результатам урока Вы узнаете о работе с пробельными или т.н. непечатаемыми символами. Также Вы научитесь правильно искать переводы строк в зависимости от операционной системы.

Продолжить чтение

Верстка \ HTML&CSS

Placehold – быстрое добавление картинок

От автора: в этом уроке я хотел бы поделиться с вами инструментом, который без сомнения может пригодиться каждому верстальщику. Это сервис PLACEHOLD.IT

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

Продолжить чтение