Jump to content
  • 0

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


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

  • Комментарии

    • Здравствуйте. Выложите пример на https://jsfiddle.net
    • Добрый день. Возникла проблема следующего рода. При верстке все псевдоклассы работают не корректно. Например задаю всем элементам margin-bottom:30px, соответственно у последнего я его пытаюсь почистить ипользуя last-child и задавая margin-bottom: 0. Но проблема в том что после этого все остальные элементы которым обьявил нижний отступ тоже обнуляются. С first-child та же самая проблема.  В чем может быть проблема? Первый раз работаю с bootstrap может ли он повлиять на работу псевдоклассов?
    • Спасибо что откликнулись, но я нашел в чем была проблема
    • Здравствуйте. Посмотрите в devTool что влияет на высоту. Кликните на картинку и выше по её родителям. Или выложите пример на JSFiddle, по картинками так не скажешь PS: вместо того что бы аттачить PSD файлы будет удобней вставлять в пост JPG. Его не потребуется скачивать и он сразу же будет отображаться на странице.
    • Добрый день. Возникла проблема следую щего плана, нужна адаптивная верстка с mobile-first. При этой верстке я сначла сверстал mobile получилась как на pictute1 picture1.psd. Чтобы сделать расстояние между блоками, которые я обвел бордером я задал margi-bottom, а у последнего элемента я его соответственно почистил. Но затем на tablet версииpicture2.psd  и desktop picture3.psd  у последнего элемента высота стала больше чем у остальных трех.  При margin-bottom 0; для последнего элемента ничего не меняется. Что это за лишняя высота у последнего блока, откуда она появилась и как ее убрать? 
×
×
  • 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.