Jump to content
  • 0

View port units интерфейс через Web View


Full-R
 Share

Question

В общем свежая безумная идея сделать интерфейс на 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 comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

RevolveR CMF достигла версии 2.0 и теперь поддерживает PHP 8.

Из нового - View Port Units based Progressive Web Application(VPU-PWA) интерфейс, который позволяет добавить домен с установленным RevolveR CMF на рабочий стол Android смартфона и работает как полноценное приложение.

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

Появилась встроенная поисковая система Pick с полноценным индексатором внешних ресурсов.

Я интегрировал чат с функциями обмена текстовыми и голосовыми сообщениями.

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

В ядре появился RKI(RevolveR Kernel Interface). Это модель объединения всех функций ядра в один интерфейс.

Понемногу добавляем объектного подхода к реализации архитектуры.

Системные требования: PHP 7.4-8.0, 20Mb памяти сервера, MySQL 5.6-8.0.

Рекомендуемая конфигурация: Unix Server на PHP 7.4 + Zend OpCache с 128Mb выделенной под Zend OpCache памяти. Пока не рекомендуется использовать PHP 8 так как он ведет себя нестабильно, медленнее работает и потребляет больше памяти сервера.

RevolveR CMF на данный момент самый экономичный и развитый с точки зрения оснащения Open Source Contens Management Framework. Всего менее чем 4 Мб кода обеспечивают полную функциональность сайта сообщества из коробки. Для развертывания подходит любой Linux или Windows хостинг с памятью 64Mb и менее. Работает framework быстро и поддерживает Big Data, а трехуровневое кэширование позволяет не беспокоиться о высоких нагрузках.

Скачать: Full-Rx/RevolveR-framework: RevolveR contents management framework (github.com)

О релизе: RevolveR CMF v.2.0.0.0 с поддержкой PHP 8

 

Link to comment
Share on other sites

  • 0

Я стал UI\UX программистом на той ноте что научился создавать полноценное и масштабируемое приложение из HTML, ECMAScript и CSS которое устанавливается в два клика\тапа на Windows и Android(MacOS и iOS проверить не на чем к сожалению; если у вас есть возможность - пожалуйста посмотрите работает ли инсталлятор)ю На этой ноте я перестал быть сраным верстальщиком постоянно за*иж*нным дизайнерами и программерами и моя мечта создать что-то классное и новенькое сбылась. В фреймворк RevolveR я вложил 5 лет работы и весь 10 летний опыт разработки под web.

8 лет назад я создавал приложения на strict xHTML и RDFa в режиме XML application из Drupal, но теперь все гораздо проще и легче.

За пять лет я написал около 4х магабайт своего кода включая полный back-end и полный front-end без единого third party решения для framework и сейчас он самый эффективный и быстрый. Появляется такое понятие как энергоэффективность и экологичность программирования. Это нужно учесть. Поскольку рефакторить очень дорого и ниша не заполнена советую всем по возможности начать свои проекты с нуля и получить место под солнцем на новых решениях. А места пока есть и поезд еще не ушел.

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

Я работал с такими людьми как Microsoft, Linux foundation и Google для разработки нового направления в web. Это web 4.0.

Для тех кто хочет вырасти из пеленок фронта рекомендую брать в программу View Port Units и отказываться от JavaScript фреймворков вроде Angular, Vue и React. Лучше пишите на чистом strict ECMAScript. Зарплаты обещают быть очень офигенными. Также нужно брать в программу развития PWA и уметь писать исключения для кэшей и handler установщика. Отказ от media queries обязателен сразу же.

Это сейчас самое оптимальное направление разработки основанное на синтетическом программном дизайне, который полностью реализуется на CSS. Даже SVG не особо обязательно, но так же рекомендуется. Возрождаются традиции flash в комплексе с совместимым SEO.

Не уходите в направление Java разработки и вы не проиграете важное в жизни время на освоение технологии. Имея базу fron-end уже можно разрабатывать годные приложения без нужды ковыряться в Андроидах и париться с компиляцией под iOS.

Рекомендуется сразу привыкнуть не обращать внимания на разрешение экрана и писать такой дизайн который будет адекватно скалиться.

Также советую не брать Node JS на сервер так как она порождает говнокодеров и плохих программистом из-за наличия большого числа готовых модулей. А с точки зрения подхода к разработке проигрывает со всеми своими сраными сборщиками и транспиляторами Python и тому же PHP.

JIT вообще очень плохо работает на данный момент и это сказалось на качестве работы проектов под PHP 8. Исправить разработчики перепотребление памяти и медленную работу скрипта не смогут. Выделенный сервер это к сожалению тоже не лечит. В общем не берите NodeJS - не будьте говнарями и изучайте базы данных. Время Big Data и нужно понимать почему NoSQL не подходит.

Возьмите SMACCS а не BEM.

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

Так что вот вам записка куда развиваться чтобы вам не скучно было. А то что-то форум подох, а в интернетах одни педики реактивные со своими недокурсами.

Добавлены виджет курсов валют и криптовалют. Репозиторий переехал в новую ветку для версии 2.x.

 Full-Rx/RevolveR-CMF: RevolveR Contents Management Framework v.2.x (github.com)

Без имени-1.png

Без имени-2.png

Без имени-3.png

Edited by Full-R
Link to comment
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
Answer this question...

×   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.

 Share

  • Similar Content

    • By zeiger2
      Здравствуйте! У меня стоит задача, что при наведении на блок li строка должна поменять цвет, в том числе и картинка. Я меняю картинку с помощью 
      background-image: none;     background: url(../img/check_icon_red.png) left no-repeat;   Но теперь картинка позицианируется не там где должна, её можно поставить на место только вручную, через -100px. Нужно поставить ровно туда, где она была. Должна быть в одном ряду с другими
    • By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
    • By Марко
      Добрый день. Начинающий программист, столкнулся с проблемой. Селектор .class не работает должным образом. Несмотря на правильное, я надеюсь, описание, на web-странице не отображается ни одно изображение. С чем может быть связано? Заранее спасибо за помощь. 



    • By Kaido
      Использую готовый плагин для модальных окон(от MaxGraph). Проблема в том, что когда у меня открыто два модальных окна, для примера Форма + Политика конфендициальности, и мне нужно закрыть политику вместе с ней закрывается и другое модальное окно. В JS я не сильно разбираюсь(собственно из за этого и использую готовый плагин), можете помочь кто работал с этим плагином? Я примерно понимаю как он работает, но реализовать чтобы закрывалось только одно не получается.
       
        <div class="content"> <button class="modal-btn" data-path="first" data-animation="fadeInUp" data-speed="1500">Открыть окно 1</button> </div> <div class="modal"> <div class="modal__wrapp" data-target="first"> <div class="modal__content"> <button class="modal__close">Закрыть</button> модальное окно <button data-path="policy">Политика</button> </div> </div> <div class="modal__wrapp" data-target="policy"> <div class="modal__content"> <button class="modal__close">Закрыть</button> политика </div> </div> </div> .modal { --transition-time: 0.3s; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000; cursor: pointer; overflow-y: auto; overflow-x: hidden; text-align: center; opacity: 0; visibility: hidden; transition: opacity var(--transition-time), visibility var(--transition-time); } .modal__wrapp { display: none; cursor: default; width: fit-content; height: fit-content; } .modal__content{ position: absolute; left: 500px; width: 500px; height: 500px; display: flex; color: white; flex-direction: column; text-align: left; background-color: #000; } .modal__content button{ width: 200px; height: 50px; margin: 50px 0; } .modal.is-open { opacity: 1; visibility: visible; transition: opacity var(--transition-time), visibility var(--transition-time); } .modal__wrapp.modal-open { display: flex; } .disable-scroll { position: relative; overflow: hidden; height: 100vh; position: fixed; left: 0; top: 0; width: 100%; } .fade { opacity: 0; transition: opacity var(--transition-time); } .fade.animate-open { opacity: 1; transition: opacity var(--transition-time); } .fadeInUp { opacity: 0; transform: translateY(vw(-100)); transition: opacity var(--transition-time), transform var(--transition-time); } .fadeInUp.animate-open { opacity: 1; transform: translateY(0); transition: opacity var(--transition-time), transform var(--transition-time); } .modal__wrapp[data-target="policy"] .modal__content{ left: 1050px; background-color: #000; opacity: .5; } class Modal { constructor(options) { let defaultOptions = { isOpen: () => {}, isClose: () => {}, } this.options = Object.assign(defaultOptions, options); this.modal = document.querySelector('.modal'); this.speed = false; this.animation = false; this.isOpen = false; this.modalContainer = false; this.previousActiveElement = false; this.fixBlocks = document.querySelectorAll('.fix-block'); this.focusElements = [ 'a[href]', 'input', 'button', 'select', 'textarea', '[tabindex]' ]; this.events(); } events() { if (this.modal) { document.addEventListener('click', function(e){ const clickedElement = e.target.closest('[data-path]'); if (clickedElement) { let target = clickedElement.dataset.path; let animation = clickedElement.dataset.animation; if (clickedElement.classList.contains('modal-close')) { this.close(); } let speed = clickedElement.dataset.speed; this.animation = animation ? animation : 'fade'; this.speed = speed ? parseInt(speed) : 300; this.modalContainer = document.querySelector(`[data-target="${target}"]`); this.open(); return; } if (e.target.closest('.modal__close')) { this.close(); return; } }.bind(this)); window.addEventListener('keydown', function(e) { if (e.keyCode == 27) { if (this.isOpen) { this.close(); } } if (e.keyCode == 9 && this.isOpen) { this.focusCatch(e); return; } }.bind(this)); this.modal.addEventListener('click', function(e) { if (!e.target.classList.contains('modal__wrapp') && !e.target.closest('.modal__wrapp') && this.isOpen) { this.close(); } }.bind(this)); } } open() { this.previousActiveElement = document.activeElement; this.modal.style.setProperty('--transition-time', `${this.speed / 1000}s`); this.modal.classList.add('is-open'); this.disableScroll(); this.modalContainer.classList.add('modal-open'); this.modalContainer.classList.add(this.animation); setTimeout(() => { this.options.isOpen(this); this.modalContainer.classList.add('animate-open'); this.isOpen = true; this.focusTrap(); }, this.speed); } close() { if (this.modalContainer) { this.modalContainer.classList.remove('animate-open'); this.modalContainer.classList.remove(this.animation); this.modal.classList.remove('is-open'); this.modalContainer.classList.remove('modal-open'); this.enableScroll(); this.options.isClose(this); this.isOpen = false; this.focusTrap(); } } focusCatch(e) { const focusable = this.modalContainer.querySelectorAll(this.focusElements); const focusArray = Array.prototype.slice.call(focusable); const focusedIndex = focusArray.indexOf(document.activeElement); if (e.shiftKey && focusedIndex === 0) { focusArray[focusArray.length - 1].focus(); e.preventDefault(); } if (!e.shiftKey && focusedIndex === focusArray.length - 1) { focusArray[0].focus(); e.preventDefault(); } } focusTrap() { const focusable = this.modalContainer.querySelectorAll(this.focusElements); if (this.isOpen) { focusable[0].focus(); } else { this.previousActiveElement.focus(); } } disableScroll() { let pagePosition = window.scrollY; this.lockPadding(); document.body.classList.add('disable-scroll'); document.body.dataset.position = pagePosition; document.body.style.top = -pagePosition + 'px'; } enableScroll() { let pagePosition = parseInt(document.body.dataset.position, 10); this.unlockPadding(); document.body.style.top = 'auto'; document.body.classList.remove('disable-scroll'); window.scroll({ top: pagePosition, left: 0 }); document.body.removeAttribute('data-position'); } lockPadding() { let paddingOffset = window.innerWidth - document.body.offsetWidth + 'px'; this.fixBlocks.forEach((el) => { el.style.paddingRight = paddingOffset; }); document.body.style.paddingRight = paddingOffset; } unlockPadding() { this.fixBlocks.forEach((el) => { el.style.paddingRight = '0px'; }); document.body.style.paddingRight = '0px'; } } const modal = new Modal({ isOpen: (modal) => { console.log(modal); console.log('opened'); }, isClose: () => { console.log('closed'); }, });  
    • By stasN1
      Мне нужен такой результат :

      Не понимаю почему background не применяется вокруг иконок:

       
      Сам код:
      Html:
      css:

      Html:
      <section class="finish"> <div class="container"> <h2 class="finish_header">По окончании обучения Вы сможете!</h2> <div class="finish_divider"></div> <div class="finish_wrapper"> <finish_item> <div class="finish_round"> <img src="/icons/finish/1 (1).png" alt="" class="finish_icon"> </div> <div class="finish_descr">Создать свой сайт или блог</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/2.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Создать свой сайт или блог</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/3.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Обеспечить ему медленный, но верный рост в ТОП</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/4.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Достигнуть стабильного прироста посетителей</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/5.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Достигнуть стабильного прироста посетителей</div> </finish_item> </div> </div> </section>  
      Css:
      .finish .finish_wrapper { margin-top: 41px; display: flex; justify-content: space-between; } .finish .finish_wrapper .finish_item { width: 204px; } .finish .finish_wrapper .finish_item .finish_round { width: 115px; height: 115px; background-color: #b4e2ff; border-radius: 8px; } .finish_descr { font-family: Roboto; font-size: 17px; line-height: 20px; font-weight: 300; color: #efefef; Спасибо!
       

      Уже решил, спасибо!
      У меня CSS селектор вида:
      .finish .finish_wrapper .finish_item .finish_round

      А должен быть:
      .finish .finish_wrapper finish_item .finish_round
      Т.е. без точки перед finish_item, так как это не класс, а элемент
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy