Jump to content

Recommended Posts

В общем свежая безумная идея сделать интерфейс на VPU(view port units) таким образом чтобы избежать media queries.

Сейчас сделано определение мобильной версии браузера и на CSS4 vars сделаны переключатели масштаба элементов интерфейса.

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

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

Интерфейс у меня написан полностью динамический на ECMA Script fetch и вместе с SVG графикой весит примерно 300Кб не сжатого сервером кода, что гораздо лучше, чем разрабатывать отдельное приложение для mobile web.

Мой проект RevolveR CMF: https://revolvercmf.ru/ (сайт сообщества, на котором пока ни чего нет - просто чтобы протестировать интерфейс на VPU и SPAx).

Видео обзор системы: 

 

 

Дистрибутив для установки вот здесь: https://github.com/Full-Rx/RevolveR-framework/releases/tag/1.9.2.x

Группа на facebook тут: https://www.facebook.com/groups/331465761595917

Фреймворк позиционируется, как замена Drupal и предоставляет широкий спектр функций для создания сайта сообщества.

Интерфейс написан самостоятельный с чистого листа на ECMA Script 7, а backend реализован на PHP SPL 7.4. Для базы данных реализован мощный кэш с шифрованием и система оптимизирована под высокие нагрузки.

Сам интерфейс легко меняется с помощью CSS, что позволяет не сильно модифицировать шаблон при создании своей темы оформления.

Хочу подсказать как лучше реализовать View Port Unit интерфейс, который сейчас работает через calc просто подменяя значение переменной для масштабирования элементов под мобильные устройства. Дело в том, что сейчас уже не нужны ни какие media queries и grids(сетки), а также нет нужды во flex-box так как VPU прекрасно позволяют реализовывать интерфейс для любых дисплеев так, что он смотрится одинокого, как это сделано в операционной системе Windows, например.

 

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

 

Link to post
Share on other sites
  • 3 weeks later...

Интерфейс обогатился на touch и mouse move menu вместо гамбургера.

Запустил сайт сообщества. Кому интересно - можете зарегистрироваться и пользоваться форумом или завести блог(русский язык доступен из меню регистрации или в меню пользователя).

Обзорчик системы на английском: https://revolvercmf.ru/en-US/revolver-cmf/

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Similar Content

    • By РоманФ
      Выполняю рабочий проект для заказчика
      Встал вопрос как сверстать секцию о нас(будет правильней чтобы верстка не поехала), так как она наслаивается на верхнюю секцию, плюс полупрозрачный border, плюс под ним еще и картинка 
      И как совместить картинки с задними блоками на секции Продукция

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

      Буду рад конструктивным советам, спасибо
       
      Прикладываю макет 
      https://www.figma.com/file/NpCXMgs0oIjLYfuiqzPTJ4/Типография?node-id=11%3A2
    • By Tempest99
      Есть адаптивное меню .mobmenu и кнопка обратной связи .feedback.openform. Как сделать так,чтобы при нажатии на гамбургер, меню с темным задним фоном перекрывало кнопку обратной связи,чтобы ее нельзя было нажать? И наоборот,при нажатии на форму обратной связи,нельзя было вызвать адаптивное меню. С меню вроде как я справился,но вот как полностью вывести фидбэк на передний план и чтобы при этом чтобы header с гамбургером отошли назад?  https://codepen.io/tempest2708/pen/dyMVoOp


      pornohub-google-chrome-2020-09-04-00-56-15_AYQgL2jv.compressed.mp4
    • By ZeteM
      Всем привет! Пытаюсь сделать анимацию так, чтобы второй блок появлялся только после того, как первый полностью уйдёт влево. Ну просто никак, пыталась нагуглить, но получается только одновременное движение двух блоков. Может, кто-то опытный хотя бы намекнёт, что не так в моём коде? 
      https://codepen.io/20ZeteM02/pen/WNwwEEp
  • Member Statistics

    46,944
    Total Members
    1,451
    Most Online
    alexnik197
    Newest Member
    alexnik197
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Свежие Темы

  • Последние сообщения

    • Уважаемые форумчане! Спешим сообщить, что в сентябре мы запустили защиту от ботов, которая построена на базе распределенных центров очистки, что позволяет быстро отвести трафик для очистки, отрезать нелегитимный и так же быстро вернуть легитимный трафик на Ваш сайт. Вы платите только за чистый трафик, полученный на защищенные сайты. Движок защиты от ботов выполняет анализ поведения посетителя сайта, формирует его «цифровой отпечаток» и сохраняет результаты проверки в базе данных. База данных содержит миллионы цифровых отпечатков браузеров, что позволяет нам быстро и с большой точностью идентифицировать большинство ботов и хакерских атак. База данных формируется динамически, а также постоянно расширяется исследовательской командой и специалистами по безопасности. Для большинства посетителей вашего сайта ничего не изменится, они будут посещать ваш сайт как обычно. Благодаря чему Вы получаете: * Снижение нагрузки на сервер; * Улучшение SEO; * Точную веб аналитику; * Защиту от взлома и спама; * Защиту от кражи контента и влияния конкурентов. Зарегистрироваться и заказать услугу несложно: кликните на странице https://m-hoster.com/guard.php на кнопку "Сделать заказ!" Так же рекомендуем прочитать FAQ по данной услуге - https://m-hoster.com/billing.php?do=faq&group=10 Приятной Вам работы, будьте всегда защищены. С уважением, команда M-Hoster.com
    • Обрыв соединения с сервером. Трассировка и пинг «Ааа, помогите, все пропало!» – если ваш внутренний голос реагирует на обрыв соединения с сервером примерно так, этот материал точно для вас. :) Безусловно, со своей стороны мы каждый день делаем все возможное, чтобы ничто не мешало вашей работе в облаке, но случись форс-мажор – будем разбираться. А чтобы быстрее сориентироваться в ситуации и понять, на чьей стороне ошибка, вот вам задача-минимум – во время обрыва первым делом выполните трассировку маршрута и пинг промежуточных узлов. Как все это сделать читайте в нашей статье.  
    • https://webref.ru/css/value/media
  • Popular Contributors

    Nobody has received reputation this week.

×
×
  • Create New...