Интерактивные панорамные фотографии на вашем сайте — используем плагин jQuery Panorama Viewer

Как путешественник и фотограф, я всегда был разочарован тем, каким образом мы публикуем на сайте свои панорамные фотографии. Очень часто детализированные панорамные фотографии приходится подстраивать под макет веб-сайта, что делает невозможным наслаждаться полноформатными панорамными фотографиями. Про такие фотографии Derek Zoolander однажды сказал, «Что это — фото для муравьев?»
Я разработал очень простой плагин, который позволит вам сохранять нормальную ширину панорамных фотографий, позволяя посетителю сайта прокручивать их. Итак, встречайте — jQuery Panorama Viewer!
Примечание: этот плагин был протестирован на Chrome, Firefox, Safari, а также на настольном компьютере и мобильном телефоне. На IE не был протестирован.

Embed an Interactive Panoramic Photo with Panorama Viewer

Как это работает?

Вместо того, чтобы иметь контейнер DIV с изображением, который прокручивается при перетаскивании, я решил идти по пути использования CSS, а именно атрибута background. Причина такого выбора проста — это позволяет разработчику контролировать высоту панорамной фотографии без необходимости задавать ее в явном виде, в то же время сохраняя отзывчивость.
Вот как это работает:

Сначала Panorama Viewer оборачивает фотографию и помещает ее в полную ширину в контейнер, что позволяет не расширять макет по ширине. Как только это будет сделано, плагин создает другой контейнер внутри, и делает фотографию фоном этого контейнера с помощью атрибута CSS background и background-size. Плагин реагирует на действие перетаскивания.

В процессе перетаскивания, вместо того, чтобы перемещать контейнер, плагин будет изменять положение фонового изображения (background-position).
Как встроить плагин?

Убедитесь, что вы включили в раздел <head></head>последнюю версию библиотеки jQuery, плагин jquery.panorama_viewer.js и CSS файл panorama_viewer.css, которые можно найти здесь

Теперь, поместите панорамные фотографии в контейнер, как здесь :

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

repeat: Если у вас идеальная 360 панорама и вы хотите, чтобы пользователь могу прокручивать ее по кругу без учета границ фотографии, установите значение true. По умолчанию стоит значение false
direction: Если у вас вертикальная панорама, установите «vertical» — тогда пользователь сможет прокручивать вверх и вниз. Значение по умолчанию «horizontal».
animationTime: Время в миллисекундах,сколько длится эффект замедления после прокрутки. Значение по умолчанию 700.
easing: Эффект анимации. Доступные значения: «ease», «linear», «ease-in», «ease-out», «ease-in-out», «cubic-bezier(…))». По умолчанию — «ease-out».
overlay: Если true, то высвечивается иконка, говорящая пользователю, что это панорама. По умолчанию — true.

Остаток от деления числа, возведенного в степень, на другое число

В алгоритмах симметричного шифрования (RSA) возникает необходимость вычисления остатка от деления большого числа в большой степени на другое число, т.е. необходимо вычислить (xy) % p.

Примеры:

 

Ниже приведен фрагмент кода на С, который решает данную проблему (итеративный алгоритм) :

Источник: http://www.geeksforgeeks.org

Рекурсивный алгоритм:

Источник: http://ideone.com/vPt3OB

Анимированный скролл с помощью библиотеки Scrollanim

Мягкое проявление фрагментов и блоков страницы при скролле, да еще с элементами анимации — все это можно сделать при использовании бесплатной библиотеки Scrollanim

Screen Shot 2016-08-16 at 10.49.48

Скачать

Демо

Читать далее

Листаем PDF страницы — бесплатная HTML5 платформа для создания эффекта пролистывания

Теперь издательства и отдельные разработчики, выпускающие цифровые издания,  могут воспользоваться мощными инструментами для пролистывания PDF документов, которые открывают захватывающие возможности при создании цифровых журналов.
Screen Shot 2016-08-10 at 10.05.30
Компания Fliphtml5.com анонсировала впечатляющие HTML5 инструменты   для цифровой публикации, предназанченные для издателей журналов. Эти инструменты позволяют довольно быстро и эффективно разрабатывать цифровые журналы с большим количеством интерактивных функций. Цифровые журналы с функцией пролистывания легко могут  созданы из страниц в формате PDF. Созданные с помощью HTML5, они могут быть доступны миллионам читателей в Интернете на своих устройствах, включая персональные компьютеры, ноутбуки, iPad и др. Fliphtml5.com является ведущим мировым поставщиком цифрового издательского программного обеспечения.

Источник: www.whatech.com
Подробнее:  Fliphtml5.com

Отзывчивый и адаптивный веб дизайн — в чем разница?

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

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

adaptive_vs_responsive_web_approach_fit_content_width

Рис. 1 Adaptive (адаптивный) — генерация макетов, которые оптимизированы и уникальны для каждого класса устройства.

Responsive (отзывчивый) — универсальный дизайн, элластично меняющийся в зависимости от дисплея устройства.

Читать далее

Веб дизайн — 6 лучших фреймворков материального дизайна c открытым исходным кодом

Background Unusual modern material design. Abstract Illustration.

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

Заглядывая назад в 2014 год, Google тогда выпустила один из перых таких фреймворков, призванных стандартизировать дизайн приложений для Chrome OS и Android и разработала основные принципы для разработчиков и дизайнеров, которые задавали определенный набор стандартов. Это в особенной мере относилось к  проектам с открытым исходным кодом (open source). В последствии этот тренд получил  название материального дизайна (Material Design).

Читать далее

Бесплатные 3d модели в разных форматах

Хочу поделиться очень интересным ресурсом, в котором представлено огромное множество 3d моделей, созданных в разных программах (3D  MAX, Maya, Cinema4d, Blender и др.). Для скачивания необходима регистрация.

Screen Shot 2016-08-03 at 14.42.00

Yii2 — доска объявлений. Урок 2

Настраиваем адрес доступа

Для доступа к сайту в адресной строке надо каждый раз набирать путь к папке web: http://localhost/ads/frontend/web,  а для доступа к админке —  http://localhost/ads/backend/web. Чтобы пользователь попадал на сайт при наборе http://localhost/ ads, а администратор сайта при наборе http://localhost/ads/backend, добавим следующие файлы .htaccess в корневую директорию сайта и  в директории /frontend/web и /backend/web:

Добавьте следующий файл .htaccess в корневую директорию /ads:

Добавьте следующий файл .htaccess в директории /ads/frontend/web и /ads/backend/web:

 Настраиваем URL

Сейчас адреса доступа к страницам нашего сайта выглядят очень громоздко и не   SEO дружественно.Если открыть сайт, набрав в адресной строке браузера http://localhost/ads и щелкнуть по пункту меню About, то увидим следующее:

Screen Shot 2016-07-13 at 13.46.06

Обратите внимание на URL — сейчас он «некрасивый» — содержит индексный файл и параметры доступа.

В Yii2 есть возможность сделать URL более читаемыми. Для этого откройте файл /ads/frontend/config/main.php и добавьте следующие строки в массив components (или просто раскомментируйте соответствующие строки):

Теперь снова зайдите на наш сайт и щелкните по пункту меню About — адресная строка изменилась, URL стал более привлекательным:

Screen Shot 2016-07-13 at 13.53.37

В следующем уроке мы создадим базу данных и натроим в конфигурационных файлах подключение.

Yii2 — доска объявлений. Урок 1

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

Что создаем?

Идея веб приложения, которое мы с вами будем разрабатывать, проста — пользователи, заходя на сайт, смогут могут публиковать объявления в нужной категории. Фактически это коллективный блог, в котором посты являются объявлениями. Размещать объявления смогут любые пользователи, как зарегистрированные, так и гости. Но зарегистрированные пользователи, в отличие от гостей,  получают доступ к личному кабинету, в котором будут отображаться сделанные ими объявления с возможностью вносить изменения, т.е. делать правку, просматривать и удалять объявления. Гость также сможет получить список своих объявлений с возможностью правки и  удаления, но только в течение одной сессии. Объявления, сделанные им за предыдущие сессии,  для правки ему недоступны. У нас будет еще одна роль — это админ, у которого будет возможность править и удалять любые объявления, добавлять и изменять категории, в которых пользователи размещают свои объявления. Кроме того админ сможет управлять пользователями — добавлять и удалять пользователей из системы, блокировать («банить»), а также подтверждать запросы пользователей на добавление в систему. Теперь о регистрации пользователей. Пользователи смогут регистрироваться обычным образом через сайт, а также через популярные социальные сети (Vkontakte,Facebook, Google+, Twitter). В последнем случае им на почту будет  выслан пароль, по которому они смогут заходить на сайт. Теперь я скажу несколько слов, почему я выбрал Yii2 в качестве  фреймворка для разработки данного веб приложения.

Почему Yii2?
1. Данный фреймворк демонстрирует очень высокую производительность, что делает его предпочтительным для разработки современных  веб приложений, начиная от простых посадочных страниц до продвинутых порталов и интернет магазинов.
2. Хорошая поддержка, постоянные обновления, русскоязычное сообщество, документация на русском языке. Как показывают опросы, Yii2 пользуется большой популярностью в России.
3. Использует парадигму MVC (Model-View-Controller — модель, представление, контроллер), что делает код элегантным, легко читаемым, расширяемым, масштабируемым и гибким. Удобно вносить изменения в код, переопределять фрагменты кода. Можно создавать собственные расширения, определять собственные события.
4. Встроенная защита от  SQL инъекций (SQL injections) , межсайтового скриптинга (Cross Site Scripting (XSS)), межсайтовой подделки (подмены) запроса (Cross Site Request Forgery (CSRF))
5. Отличный и очень удобный генератор форм, моделей, контроллеров, модулей, CRUD (Create, Read, Update, Delete — формы для просмотра списка записей, для их создания чтения, обновления и удаления).
6. Одна из самых мощных среди всех фреймворков система управления правами и ролями пользователей ( ACF (Access Control Filter  —  доступ для зарегистрированных пользователей и гостей), Role-Based Access Control (RBAC) — система управления доступов на основе присвоенных пользователям ролей), расширения  OpenID, OAuth or OAuth2  для управления доступом через систему входа, предоставляемых популярными веб сайтов.
7. Мощная и гибкая в плане настройки система кеширования как  SQL запросов, так и фрагментов HTML кода.
8. Отличная и очень удобная встроенная многоуровневая система отладки.

Это не полный перечень всех фишек Yii2 — более подробно вы с ними познакомитесь в процессе прохождения уроков. Итак, настало время установки Yii2.

Yii2 — шаблоны приложения (два варианта установки)

Существуют два начальных шаблона приложения (не путайте их с шаблонами сайта) при установке Yii2 — basic (простой) и advanced (продвинутый).  В шаблоне приложения advanced у нас из коробки есть три различных приложения  (в Yii2 принято называть приложениями полнофункциональные части всей системы со своими контроллерами, моделями, представлениями, модулями и настройками) — сам веб сайт (frontend, приложение пользователя), админка (backend), которая отделена от приложения пользователя и консольное приложение (console) для создания и запуска консольных приложений. В конфигураци basic — одно приложение, однако и здесь можно создать свою админку с соответствующим конфигурационным файлом и  правами доступа. Одним из плюсов шаблона приложения advanced — это то, что из коробки развертывается начальная  база данных (с помощью миграций), присутствует регистрация пользователей и уже запрограммирована возможность восстановления его пароля. Конфигурация advanced  особенно удобна при коллективной разработке проекта, когда одна или несколько команд программистов работают над своими задачами. Так как мы планируем иметь админку для управления сайта, то разумно выбрать при установке шаблон приложения advanced.
Прежде чем установить Yii2 на веб сервере, необходимо установить Composer. Я рекомендую установку Yii2 прводить именно с помощью Composer, так как сегодня эта программа является стандартом де-факто для установки и обновления веб приложений. Если у вас уже установлен composer, то следующий раздел можно пропустить.

Установка composer

Если вы работаете на маке (операционная система MAC OSX), то для установки   Composer запустите Terminal  и введите  следующую команды

Последняя команда переместит скачанный файл composer.phar в директорию /usr/local/bin

Чтобы можно было глобально вызывать composer, не указывая каждый раз путь к нему, создадим  alias в файле .bash_profile. Для этого внесем в это файл необходимую строчку, но прежде откроем это файл в редакторе, установленном по умолчанию:

Наберите в редакторе следующую строку:

Сохраните файл и, чтобы изменения вступили в силу без перезагрузки Terminal, введите команду:

Теперь можно не набирать каждый раз php composer.phar, а набирать вместо этого composer. Сomposer установлен!
Для установки composer на  Windows скачайте и запустите Composer-Setup.exe. После запуска программа установит composer и пропишет путь к нему. Если вы работаете под Windows, то все команды надо набирать в консольном окне.
Переходим теперь к установке Yii2.
Для установки Yii2 перейдите с помощью команды cd путь_к_папке в корневую папку веб сервера.
У меня на маке установлен XAMPP и путь к корневой папке выглядит так:
/Applications/XAMPP/xamppfiles/htdocs
Меняем текущую директорию на корневую папке веб сервера:

Убедитесь, что в корневой папке возможно создание директории (при необходимости измените права доступа)
Для установки Yii2 (шаблон приложения advanced) введите следующую команду:

Если alias для composer не задан, то введите команду

В папке htdocs будет создана папка ads, и в ней развернут шаблон приложения.
После того, как шаблон приложения развернут, необходима его инициализация, так как в зависимости от того, на каком этапе мы находимся (разработка или эксплуатация приложения), конфигурационные файлы, index.php и некоторые другие файлы будут различными. При инициализации система предложит установить приложение либо в конфигурации разработка (dev) (от англ. Development — разработка), либо в конфигурации (prod — от англ. Production — готовый продукт). Первая конфигурация как раз нам и нужна, поскольку мы начинаем разработку будущего приложения и нам нужны средства отладки.
Для инициализации приложения перейдите из корневой папки в папку ads:

и запустите скрипт инициализации приложения:

В консольном окне появится информация об установке и вопрос — в какой конфигурации вы хотите установить Yii2:

environment questionВведите «0» (ноль) и нажмите Enter. Появится вопрос — Инициализировать приложение в окружении (конфигурации) Development (разработка).

Screen Shot 2016-06-13 at 8.54.55

Введите «yes» и нажмите Enter. В окне вы увидите список созданных файлов и списком назначенные права доступа, необходимые для работы приложения. Если инициализация прошла успешно, появится соответствующее сообщение:

Screen Shot 2016-06-13 at 12.33.53

Запустим приложение — в строке браузера наберите

http://localhost/ads/frontend/web/index.php

При этом должна загрузиться стартовая страница:

start_page

В следующем уроке мы настроим .htaccess и сделаем URL, открывающие ту или иную страницу приложения более привлекательными

 

 

Unite Gallery — многофункциональная фото и видео галерея с адаптивным дизайном

Сегодня я хочу познакомить вас с потрясающей по своим возможностям фото (и видео!) галереей. Галерея реализована в виде плагина jQuery.

 

Unite Gallery

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

Читать далее