Премиум \ PHP \ Cоздание каталога товаров с помощью PHP, MySQL и jQuery

каталог товаров

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

Хлебные крошки – это навигационная цепочка, представляющая собой путь от текущего элемента до «корня». Это весьма полезная вещь, как для рядового пользователя, так и для поисковиков.

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

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

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

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

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

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

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

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

Верстка \ HTML&CSS

Эффекты загрузки элементов сетки с помощью анимации CSS

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

Сегодня мы хотели бы поделиться с вами эффектами загрузки элементов сетки. Идея в том, чтобы показывать элементы в сетке с анимацией, когда те оказываются в окне просмотра. Эти возможности бесконечны и мы хотели бы немного вдохновить вас. Некоторые эффекты взяты из великолепных эффектов прокрутки CSS3 Хакима эль Хаттаба (Hakim El Hattab), а идея навеяна мозаичной анимацией, подсмотренной в приложении Google Plus.

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

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

Верстка \ HTML&CSS

Галерея 3D-изображений-перевертышей

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

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

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

Разбираем растяжение поля поиска

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

Возможно, вы заметили те маленькие усовершенствования, которые в последнее время появились здесь, на Codrops. Одной из тех вещей, которые мы решили изменить, стало поле ввода для поиска. Оно было перенесено из боковой колонки в верхний колонтитул и применен простой эффект, при котором нужно щелкнуть, чтобы поле ввода увеличилось. Мы получили множество просьб объяснить, как это сделано, и сегодня хотели бы показать вам, как «с нуля» создать подобный input для поиска. Нашей целью стало максимальное увеличение совместимости мобильных устройств и старых браузеров (вплоть до IE8). Хотя это может показаться очень легкой задачей, нам придется применить несколько хитростей, чтобы все заработало должным образом.

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

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

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

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

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

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

Верстка \ CSS 3

Совет CSS: лучшее скругление углов

От автора: все мы применяли в своем дизайне border-radius для скругления углов изображений, div’ов, nav’ов и т.д… Но замечали ли вы, что происходит, когда к элементу с радиусом добавляется толстая рамка?

Как известно из моей статьи Углубляемся в CSS, закругленные углы в border-radius формируются из радиуса четверти окружности.

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

Верстка \ HTML&CSS

Стильные эффекты модальных окон

От автора: несколько месяцев назад я нагло украл идею Чарли Глисона (Charlie Gleason). В его презентации на MelbJS за текстом на многих слайдах были показаны полноэкранные анимированные GIF’ы (в том числе его собственного лица) в оттенках серого. Я обнаружил, что он усердно отредактировал и оптимизировал каждый GIF в Photoshop’е, чтобы те хорошо смотрелись за текстами слайдов.

Мне захотелось сделать то же самое, но не занимаясь таким трудом.

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

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

Файл htaccess

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

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

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

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

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

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

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

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