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
  • 2 months later...

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
  • 2 weeks later...

Я стал 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
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 cozy_eternity
      Столкнулся с проблемой показа скрытых элементов. Ставлю div'у display:none и при выборе radio кнопки, div должен отображаться, но этого не происходит, прошу помочь..

       
      <label>Нужны ли распашные дверцы?</label> <p><input type="radio" name="swing" onclick="ShowElement1">Да</p> <p><input type="radio" name="swing">Нет</p> <div id="swing"> <p><label>Введите размер ячеек:</label></p> <p>Высота<input type="number"></p> <p>Ширина<input type="number"></p> <p>Глубина<input type="number"></p> </div> #swing { display: none; } function ShowElement1(){ document.getElementById("swing").style.display='block'; } Разобрался
    • By Alex_st22
      Здравствуйте, пытаюсь сделать небольшой редактор. Сначала нажимается кнопка на html-странице, потом заполняется форма с параметрами графоэлемента (иконы), эти параметры считывает скрипт, передаёт их в другую функцию. Та формирует код HTML с тегом svg и вставляет в блок draw. В этом деле вообще начинающий, ещё в голове путаница с расположением элементов, паддингами и т.п. А проблема, что после исполнения скрипта ничего не происходит, иногда на секунду мелькает что-то похожее, но в целом результата нет.
       
      Код
      HTML:
      <!DOCTYPE html>
      <html lang="ru">
        <head>
          <meta charset="utf-8">
          <title>Иконы</title>
          <link rel="stylesheet" href="style.css">
        </head>
        <body>      
            <div class="open-button">
                <button onclick="openForm()">Открыть форму</button>
          </div>
          <div class="form-popup" id="IconForm">
                <form class="form-container">
                     <h1>Параметры иконы</h1>
                  <label for="bordercolor"><b>Цвет границы</b></label>
                  <select id='select_bc' size='1'>
                      <option value='#000'>Чёрный</option>
                      <option value='#00f'>Синий</option>
                      <option value='#f00'>Красный</option>
                      <option value='#0f0'>Зелёный</option>
                  </select>
                  <p></p>
                  <label for="background"><b>Цвет фигуры</b></label>
                  <select id='select_bg' size='1'>
                      <option value='#fff'>Белый</option>
                      <option value='#bbf'>Синий</option>
                      <option value='#fbb'>Красный</option>
                      <option value='#bfb'>Зелёный</option>
                  </select>
                  <p></p>
                  <label for="fontcolor"><b>Цвет текста</b></label>
                  <select id='select_fc' size='1'>
                      <option value='#000'>Чёрный</option>
                      <option value='#00f'>Синий</option>
                      <option value='#f00'>Красный</option>
                      <option value='#0f0'>Зелёный</option>
                  </select>
                  <p></p>
                  <label for="text"><b>Содержание фигуры</b></label>
                  <textarea id="text_in" cols="20" rows="3"></textarea>
                  <button type="submit" class="btn" onclick="return acceptArgs()">Принять</button>
                  <button type="submit" class="btn cancel" onclick="return closeForm()">Закрыть</button>
                </form>
          </div>
          <div id="Draw"></div>
          
          <script type="text/javascript" src="script.js"></script>
        </body>
      </html>
      CSS:
      {box-sizing: border-box;}
      /* Кнопка, используемая для открытия формы */
      .open-button {
        background-color: #555;
        color: white;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        opacity: 0.8;
        position: fixed;
        width: 280px;
      }
      /* Всплывающая форма-скрыта по умолчанию */
      .form-popup {
        display: none;
        position: fixed;
        border: 3px solid #f1f1f1;
        z-index: 9;
      }
      /* Добавить стили для контейнера формы */
      .form-container {
        max-width: 300px;
        padding: 10px;
        background-color: white;
      }
      /* Поля ввода полной ширины */
      .form-container input[type=text], .form-container input[type=password] {
        width: 100%;
        padding: 15px;
        margin: 5px 0 22px 0;
        border: none;
        background: #f1f1f1;
      }
      /* Когда входы получают фокус, сделайте что-нибудь */
      .form-container input[type=text]:focus, .form-container input[type=password]:focus {
        background-color: #ddd;
        outline: none;
      }
      /* Стиль для кнопок */
      .form-container .btn {
        background-color: green;
        color: white;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        width: 100%;
        margin-bottom:10px;
        opacity: 0.85;
      }
      /* Красный цвет фона для кнопки "Отмена" */
      .form-container .cancel {
        background-color: red;
      }
      /* Добавить некоторые эффекты наведения на кнопки */
      .form-container .btn:hover, .open-button:hover {
        opacity: 1;
      }
       
      JS:
      function openForm() {
        document.getElementById("IconForm").style.display = "block";
      }
      function closeForm() {
        document.getElementById("IconForm").style.display = "none";
        return false;
      }
      function drawIcon(bc, bg, fc, text) {
        var svg = '<svg> <rect rx="32.8" ry="18.3" x="500" y="500" height="55" width="99" ';
        svg += 'fill="'+ bg + '" stroke="'+ bc +'" stroke-width="2px" />';
        svg += '<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill='+fc+";'>";   
        svg += text + "</text></svg>";
        alert(svg);
        document.getElementById('Dragon').innerHTML += svg;
        return true;
      }
      function acceptArgs() {
        var bc = document.getElementById("select_bc");
        bc = bc.options[bc.selectedIndex].value;
        var bg = document.getElementById("select_bg");
        bg = bg.options[bg.selectedIndex].value;
        var fc = document.getElementById("select_fc");
        fc = fc.options[fc.selectedIndex].value;
        var text = document.getElementById("text_in").value;
        closeForm();
        drawIcon(bc, bg, fc, text);
        
      }
    • By 7908.96
      <!doctype html> <html>   <head>     <meta charset="utf-8">     <title>Тритон Авто</title>     <style>       * {         margin: 0;         padding: 0;         font-family: Tahoma, Geneva, sans-serif;         color: #2e2e2e;       }       body {         background: #f8f7f3;       }       a {         color: #037d64;       }       #page {         width: 1100px;         margin: 0 auto;       }       #header {         background-image: url(‪C:\Users\vip_c\Desktop\html\img\qq.jpg);       }     </style>   </head>   <body>     <div id="page">       <div id="header">       </div>     </div>   </body> </html>  
  • Member Statistics

    47,200
    Total Members
    1,451
    Most Online
    тим
    Newest Member
    тим
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...