Десктопная версия

Данный материал является вольным переводом статьи:
Danny Markov Creating Your First Desktop App With HTML, JS and Electron

Материал вычитывал: Михаил Синяков

Веб-приложения становятся все более мощными с каждым годом, но остается еще место для классических приложений, обладающих полным доступом к оборудованию компьютера. Сегодня вы можете создать десктопное приложения при помощи хорошо знакомых вам HTML, JS и Node.js, упаковать его в исполняемый файл и пользоваться им на Windows, OS X и Linux.

Существуют два самых популярных проекта с открытым исходным кодом, позволяющих сделать это.

Это NW.js и Electron, последний мы и будем рассматривать сегодня. Мы собираемся переписать версию, которую делали на NW.js, так что вы сможете еще и сравнить их между собой.

Начинаем работу с Electron

Программы, которые создаются при помощи Electron это просто веб сайты, которые открываются во встроенном браузере Chromium. В дополнение к стандартным API HTML5 эти сайты могут использовать полный набор модулей Node.js и специальных модулей Electron, которые позволяют получить доступ к операционной системе.

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

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

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

Запуск приложения

Поскольку приложение Electron это просто Node.js приложение, вам нужно установить npm. Сделать это довольно просто.

Откройте терминал и выполните в директории проекта следующую команду:

Это создаст папку node_modules, содержащую все необходимые зависимости для приложения. Затем, введите в терминале следующее:

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

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

Как это сделано

Сейчас мы поговорим о наиболее важных файлах, которые используются в любом приложении, написанном при помощи Electron. Давайте начнем с файла package.json, который содержит различную информацию о проекте. Например, версию, список npm зависимостей и другую не менее важную информацию.

package.json

Если вы уже работали с Node.js, то у вас уже имеется представление как это все работает. Важно отметить команду которая запускает приложение. Когда мы вызываем эту команду в консоли, то просим electron запустить файл main.js. Этот файл содержит маленький скрипт, который открывает окно приложения, определяет некоторые параметры и обработчики событий.

main.js

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

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

index.html

Здесь у нас html-код, ссылки на необходимые стили, js библиотеки и скрипты. Заметили что jQuery подключен странным способом? См. этот issue, чтобы узнать почему подключение происходит именно так.

Наконец, собственно сам JavaScript код нашего приложения. В нем мы подключаемся к RSS ленте, получаем последние статьи и показываем их. Если мы попытаемся провернуть такую операцию в окружении браузера, то ничего не получится. Канал находится на другом домене и получение данных с него запрещено. Однако в Electron такого ограничения нет, мы можем получить необходимую информацию при помощи AJAX-запроса.

Есть одна классная вещь, в приведенном выше коде, она заключается в том, что в одном файле можно одновременно использовать:

  • JavaScript библиотеки — jQuery и jQuery Flipster для создания карусели.
  • Собственный модули Electron — оболочку, которая предоставляет API для desktop-задач. В нашем случае открытие url в браузере по умолчанию.
  • Node.js модули — Модуль OS для доступа к информации о системе, Pretty Bytes для форматирования.

С их помощью наше приложение готово к работе!

Упаковка и дистрибуция.

Есть еще одна важная вещь, которую нужно сделать чтобы ваше приложение попало к конечному пользователю. Вы должны упаковать его в исполняемый файл, который будут запускать двойным щелчком. Необходимо будет собрать отдельный дистрибутив для каждой из систем: Windows, OS X, Linux. В этом нам поможет Electron Packager.

Вы должны принять во внимание тот факт, что в упакованный файл попадут все ваши ресурсы, все зависимости node.js, а так же уменьшенная копия браузера webkit. В конечном итоге получится файл порядка 50mb. Это довольно много и не практично для простых приложений, как, например, наше, но этот вопрос становится не актуальным, когда речь идет о больших и сложных приложениях.

Заключение

Единственное серьезное отличие от NW.js состоит в том, что в NW.js точкой входа выступает HTML-файл, в то время как в Electron эту роль выполняет JavaScript файл. C Electron вы получаете больше контроля. Вы легко можете построить мульти оконное приложение и организовать обмен данными между ними.

Вот что можно еще почитать по теме:

Desktops v2.0

  • 2 minutes to read
  • Contributors

By Mark Russinovich

Published: October 17, 2012

Download Desktops(61 KB)
Run now from Sysinternals Live.

Introduction

Desktops allows you to organize your applications on up to four virtual desktops. Read email on one, browse the web on the second, and do work in your productivity software on the third, without the clutter of the windows you're not using. After you configure hotkeys for switching desktops, you can create and switch desktops either by clicking on the tray icon to open a desktop preview and switching window, or by using the hotkeys.

Using Desktops

Unlike other virtual desktop utilities that implement their desktops by showing the windows that are active on a desktop and hiding the rest, Sysinternals Desktops uses a Windows desktop object for each desktop. Application windows are bound to a desktop object when they are created, so Windows maintains the connection between windows and desktops and knows which ones to show when you switch a desktop.

That making Sysinternals Desktops very lightweight and free from bugs that the other approach is prone to where their view of active windows becomes inconsistent with the visible windows.

Desktops reliance on Windows desktop objects means that it cannot provide some of the functionality of other virtual desktop utilities, however. For example, Windows doesn't provide a way to move a window from one desktop object to another, and because a separate Explorer process must run on each desktop to provide a taskbar and start menu, most tray applications are only visible on the first desktop. Further, there is no way to delete a desktop object, so Desktops does not provide a way to close a desktop, because that would result in orphaned windows and processes. The recommended way to exit Desktops is therefore to logoff.

Screenshot


Configuration Dialog


Tray Desktop Switch Window

Download Desktops(61 KB)

Run now from Sysinternals Live.

Runs on:

  • Client: Windows Vista and higher.
  • Server: Windows Server 2008 and higher.

Форум об интернет-маркетинге > Сайтостроение > Веб-строительство > Переключение между мобильной и десктопной версией сайта в адаптивной верстке.


PDA

Просмотр полной версии : Переключение между мобильной и десктопной версией сайта в адаптивной верстке.


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

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

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

В Сети встретил два javascript’а которые реализовывали подобный переход(реализовано через фиксацию ширины в viewport), но как-то результат меня не очень радовал, поскольку не всегда нормально они отрабатывали.

Поэтому набросал свой вариант перехода от адаптивной к десктопной версии сайта, возможно кому-то будет полезно мое решение.

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

в header.php в самом начале файла
<?php
$url = get_permalink();

if ($_POST ["m_template"] == "yes"){
setcookie(‘mobile_template’, "yes", time() + 60*60*24*30, ‘/’);
header("Location: $url");
exit;
}elseif($_POST ["m_template"] == "no"){
setcookie(‘mobile_template’, "no", time() + 60*60*24*30, ‘/’);
header("Location: $url");
exit;
}
?>

в том же файле между тегами <head></head>:

<?php if($_COOKIE[‘mobile_template’] == "yes" || $_COOKIE[‘mobile_template’] == "") :?>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
….
…описываете все свои медиа запросы здесь…
@media (min-width:960px) {…}
@media (min-width:768px) and (max-width:959px){…}

</style>
<?php endif;?>

В файл footer.php(ну или где захочется) вставляем простенькую кнопку/форму/ которая будет переключать мобильную/десктопную верстку.

<form action="<?php the_permalink(); ?>" method="POST">
<?php if ($_COOKIE[‘mobile_template’] == "no") : ?>
<input type="hidden" name="m_template" value="yes" />
<input type="submit" class="linkbutton" value="Switch to Mobile version" />
<?php elseif ($_COOKIE[‘mobile_template’] == "yes" || $_COOKIE[‘mobile_template’] == "") : ?>
<input type="hidden" name="m_template" value="no" />
<input type="submit" class="linkbutton" value="Switch to Desktop version" />
<?php endif;?>
</form>

Собственно, вот и все. Решение может и не очень изящное, но меня устраивает 🙂
Если у кого есть вопросы, критика или предложения по улучшению, с радостью отвечу.


Подозреваю, что такой вариант не устроит Гугл и он будет тупить, что типа сайт на mobile friendly.


Поскольку для ботов, тех кто впервые посетили сайт, или тех кто не переключался на десктопную версию, кука mobile_template отсутствует, то отдается meta viewport и медиа запросы CSS, соответственно все эти пользователи получают адаптивную верстку.

При проверке, Mobile-Friendly Test мне написал
Awesome!

This page is mobile-friendly.

Гугл вроде формы не отправляет, поэтому переход оформлял через отправку формой post запроса, чтобы гугл не переходил с адаптивного на десктопный диз и соответственно не тупил 🙂
_
Хм. Похоже таки пытается отправлять формы c POST-запросами:

http://googlewebmastercentral.blogspot.com/2011/11/get-post-and-safely-surfacing-more-of.html

Ну будем наблюдать как будет реагировать.:popcorn:

PS Как вариант, вместо формы, можно яваскриптом назначать куку и перезагружать страницу..


Многим посетителям (в том числе и мне) при заходе на сайт с телефона/планшета удобнее работать с десктопной версией сайта,
Нормальная вёрстка решает эти проблемы. В см — удобства.


Нормальная вёрстка решает эти проблемы.
Расскажите, как так сверстать меню, чтобы оно убого не смотрелось или на смартфоне или на нормальном экране? И это только один элемент, с которым всегда траблы будут.


Расскажите, как так сверстать меню,
Ещё раз попробую донести мысль: если сайт настолько убого смотрится на девайсе, что есть необходимость перейти на "другую" версию, то нужно СРАЗУ делать так, что бы на девайсе это не смотрелось убого.


Ещё раз попробую донести мысль: если сайт настолько убого смотрится на девайсе, что есть необходимость перейти на "другую" версию, то нужно СРАЗУ делать так, что бы на девайсе это не смотрелось убого.
И я еще раз попробую донести свою мысль. Как это сделать? Сами так делали, чтобы на любом экране сайт выглядел нормально? Причем именно нормально, а не то, что в десктопной версии изначально делается убого, не так как хотелось, лишь бы оно в смартфон влезало.
Покажите пример, чтобы знать, что это не бла, бла, бла…


как так сверстать меню, чтобы оно убого не смотрелось или на смартфоне или на нормальном экране?
понятие красоты конечно индивидуально) по мне так UberMenu (http://wpmegamenu.com/) и подобные вполне не убого смотрятся) скорее соглашусь с SeVlad, что если вам не удобно пользоваться мобильной версией, значит нужно с ней поработать и сделать удобной и не убогой… не все владельцы смартфонов могут просматривать десктоп версию и значит они просто вынуждены пользоваться вашей "неудобной" мобильной)
не то, что в десктопной версии изначально делается убого, не так как хотелось, лишь бы оно в смартфон влезало.
это нонсенс, по-моему, и к адаптивной верстке не относится, а скорее к "плохой" верстке :popcorn:

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


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

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


Поэтому для уже существующих сайтов самый доступный вариант это сделать именно отдельную версию под смартфоны.
А другой движок не надо? А то тут уже был такой — со своим движком для мобильных версий носился. Сдаётся мне, тебе к нему надо. 🙂

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

Об том и речь — делать нужно изначально ПРАВИЛЬНО, а не криво. И оправдывать кривизну изначально выбранного решения необходимостью создания ещё одного ОТДЕЛЬНОГО решения для другого ЮА — это бред.

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


Спасибо Всем за внимание к теме.

Вот наверно это тот случай, когда согласен со всеми 🙂

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

Простой пример. Искал себе фотоаппарат, сайт fotos.ua при заходе с планшета отправляет меня на моб. версию(поддомен). Мне она на планшете не удобна, поэтому я ищу кнопку перехода на полную версию, не нахожу ее и пытаюсь в строке удалить поддомен "m." и перейти таким образом. Меня опять отправляет на мобильную версию. Соответственно сайт закрываю… К слову сказать, кнопка перехода есть, но она спрятана в меню которое я заметил только совсем не давно…

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

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

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

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


Можете посоветовать какой-то плагин, который переключает тему?


К сожалению не могу. Не возникало еще необходимости в этом.


Сделал на сайтах адаптивный дизайн начиная с 500px кажется. В остальном — просто тянущийся.

Так вот, 100% работающий метод переключения на нормальную версию — повернуть экран боком! Работает отличено для всех телефонов что пробовал.


Кстати, в продолжение ТС

…в том же файле между тегами <head></head>:
Код:
<?php if($_COOKIE[‘mobile_template’] == "yes" || $_COOKIE[‘mobile_template’] == "") :?>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
….
…можно поставить ссылку на css файл
…<link rel="stylesheet" type="text/css"
</style>
<?php endif;?>

тоже работает

Спасибо!


vBulletin® v3.8.6, Copyright ©2000-2018, Jelsoft Enterprises Ltd. Перевод: zCarot

Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *