ArtsLab - веб-дизайн для всех Голосов: 1 Адрес блога: http://artslab.info Добавлен: 2011-02-02 16:47:37 блограйдером artslab

2016-07-22 18:32:20 (читать в оригинале)

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

Попробовать что нибудь создать

---

2016-07-22 18:32:20 (читать в оригинале)

Те кто обновил Firefox до версий 3.6, наверное знают о одном нововведений под названием “Personas”. Раньше это дополнение можно было установить отдельно, теперь же его включили в релиз. Personas – это упрощенные скины для файрфокса, которые создаются очень просто. На оф. сайте есть инструкция, в которой пошагово описан процесс создания такого скина, конечно же на английском. А теперь коротко и только о главном.

Как же создать свою тему для Firefox? Да, очень просто!

Итак, что нам понадобится:

1. Картинка для шапки, размером в 3000x200px

1. Картинка для футера/низа размером в 3000x100px

1. Дополнение для Firefox – Personas, для того чтобы протестировать свое “творение”.

Далее следует пример, с помощью которого я расскажу, как сделать свою тему для Firefox.

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

Верхушка браузера:

Низ:

Теперь пора установить дополнение Personas.

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

Идем дальше, находим в меню пункт “Настройки” и в открывшемся окне ставим галочку на “Показывать пункт “Скин пользователя” в меню”, жмем “ОК”. Затем снова кликаем по иконке и выбираем “Скин пользователя” -> “Редактировать”. Откроется новая вкладка, на ней нужно будет указать название скина, выбрать созданные нами картинки(верхнее и нижнее изображение) и выставить подходящие цвета текста.

Изменения видны “на лицо”. Нажав на кнопку “ОК”, созданная тема останется в браузере.

Вот что получилось у меня:

Если захотите поделиться своей работой со всеми остальными, то необходимо зарегистрировать себе бесплатный аккаунт на сайте “Personas” и затем отправить тему, заполнив при этом необходимый формуляр.

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

Желаю побольше креатива и красивых работ, оставляйте ссылки на ваши темы в комментариях, удачи =)

---

Сохранение карт в Google Maps для офлайн доступа (Android)

2015-08-10 23:20:38 (читать в оригинале)

Многих интересует вопрос о том, как быстро скачать карту города/области на устройстве под управлением Android или iOS для просмотра в режиме оффлайн. Существуют отдельные качалки карт, а так же приложения основанные на других сервисах (например: Maps.me с источником OpenStreetMap). Но все на самом деле гораздо проще, так как функция для скачивания/кэширования доступна по умолчанию в приложений Google Maps. Для того чтобы сохранить нужную вам часть карты, необходимо проделать следующее:

1. Кликнуть по строке поиска в верхней части приложения. При этом откроется список с последними поисковыми запросами и предложениями о местах рядом.
2. В открывшемся списке листаем в самый низ и находим там кнопку с текстом “Сохранить карту”. Нажимаем по этой кнопке.
3. Теперь вы можете еще раз изменить мастштаб карты (приблизить или отдалить), которая в итоге и сохраниться для доступа в режиме оффлайн. Подтверждаем выбор и ждем пока карта сохраниться

 
 

Таким образом можно сохранять неограниченное количество карт разных регионов. Для того чтобы увидеть все сохраненные вами карты, выберите пункт “Ваши места” из бокового меню и опуститесь в сам низ списка.

---

Сохранение карт в Google Maps для офлайн доступа (Android)

2015-08-10 23:20:38 (читать в оригинале)

Многих интересует вопрос о том, как быстро скачать карту города/области на устройстве под управлением Android или iOS для просмотра в режиме оффлайн. Существуют отдельные качалки карт, а так же приложения основанные на других сервисах (например: Maps.me с источником OpenStreetMap). Но все на самом деле гораздо проще, так как функция для скачивания/кэширования доступна по умолчанию в приложений Google Maps. Для того чтобы сохранить нужную вам часть карты, необходимо проделать следующее:

• 1. Кликнуть по строке поиска в верхней части приложения. При этом откроется список с последними поисковыми запросами и предложениями о местах рядом.
• 1. В открывшемся списке листаем в самый низ и находим там кнопку с текстом “Сохранить карту”. Нажимаем по этой кнопке.
• 1. Теперь вы можете еще раз изменить мастштаб карты (приблизить или отдалить), которая в итоге и сохраниться для доступа в режиме оффлайн. Подтверждаем выбор и ждем пока карта сохраниться

 

 

Таким образом можно сохранять неограниченное количество карт разных регионов. Для того чтобы увидеть все сохраненные вами карты, выберите пункт “Ваши места” из бокового меню и опуститесь в сам низ списка.

---

Создаем ToDo-приложение на основе Electron и AngularJs

2015-08-05 21:03:09 (читать в оригинале)

Давно хотел познакомиться с Electron, платформой для создания десктопных приложений на основе веб-технологий, но до этого момента никак не доходили руки. Сегодня мы создадим небольшое ToDo-приложение и используем для этого JavaScript-фреймворк AngularJs в связке с гугловским Material Design’ом. Код готового приложения доступен на Github.

Первым делом необходимо установить Electron:

npm install electron-prebuilt -g

Затем перейдем к созданию самого проекта. Для этого, например, можно воспользоваться генератором от Yeoman, либо создать файлы вручную. Так как нам нужно создать всего лишь несколько файлов, мы выберем второй вариант. Создадим новую папку и добавим в нее три файла: app.js, main.js и index.html.

Начнем с первого файла app.js. В нем мы инициализируем наше electron-приложение, укажем опций для окна, название, иконки и прочее. Здесь можно взять за основу код с странички документации и дополнять его по необходимости:

[js]

var app = require(‘app’); // Module to control application life.

var BrowserWindow = require(‘browser-window’); // Module to create native browser window.

// Keep a global reference of the window object, if you don’t, the window will

// be closed automatically when the JavaScript object is GCed.

var mainWindow = null;

// This method will be called when Electron has finished

// initialization and is ready to create browser windows.

app.on(‘ready’, function() {

// Create the browser window.

mainWindow = new BrowserWindow({width: 800, height: 600, resizable: false});

// and load the index.html of the app.

mainWindow.loadUrl(‘file://’ + __dirname + ‘/index.html’);

// Open the devtools.

mainWindow.openDevTools();

// Emitted when the window is closed.

mainWindow.on(‘closed’, function() {

// Dereference the window object, usually you would store windows

// in an array if your app supports multi windows, this is the time

// when you should delete the corresponding element.

mainWindow = null;

});

});

[/js]

Теперь создадим index.html в котором будет находиться внешний вид нашего приложения. Для начала просто поместим в него строку текста “Hello world” и для проверки запустим наше приложение с помощью команды:

electron app.js

Теперь скачаем необходимые нам библиотеки – AngularJs, Angular Material, а так же веб-шрифт с иконками Material Icons. Для этого можем воспользоваться менеджером пакетов npm:

npm install angular
npm install angular-material

После того как пакеты скачались их необходимо подключить в index.html. Для работы Angular Material потребуются еще две библиотеки Anuglar Animate и Angular Aria, если скачиваете скрипты вручную, то не забудьте и о этих скриптах.

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

[html]

<!DOCTYPE html>

<!– Web Font with Material Icons –> <!– Toolbar with title –>

–

[/html]

Теперь перейдем к основной части нашего списка дел к javascript-логике и для этого откроем третий файл main.js. Здесь мы для начала инициализируем angular-приложение todoApp с модулем ngMaterial, создадим контроллер AppCtrl и инициализируем несколько массивов с объектами. В первый из них поместим три объекта для навигаций с двумя полями: название пункта меню и текстовое название иконки (список всех иконок Material Icons). Во втором массиве мы будем хранить наши задачи и для этого нам так же потребуется два поля: название задачи и статус (сделано или нет). В итоге у меня получилось так:

[js]

var app = angular.module(‘todoApp’, [‘ngMaterial’]);

app.controller(‘AppCtrl’, [‘$scope’, function($scope){

$scope.options = {

name: ‘My Todo List’,

show: ‘All tasks’

};

$scope.navigationBarItems = [

{‘title’: ‘All tasks’, ‘icon’: ‘list’},

{‘title’: ‘Todo’, ‘icon’: ‘assignment’},

{‘title’: ‘Done’, ‘icon’: ‘done’}

];

$scope.myTasks = [

{‘title’: ‘Learn AngularJs’, ‘done’: false},

{‘title’: ‘Create first app with Electron’, ‘done’: true}

];

$scope.setContent = function (content) {

$scope.options.show = content;

};

}]);

[/js]

Запустим наше приложением и посмотрим, как оно выглядит и что оно уже умеет.

electron app.js

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

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

Для этого добавим код Fab-кнопки в index.html:

[html]

add

[/html]

Вернемся к файлу main.js и первым делом пропишем две необходимые нам зависимости $mdDialog и $mdToast для всплывающих оповещений:

[js]

app.controller(‘AppCtrl’, [‘$scope’, ‘$mdDialog’, ‘$mdToast’, function($scope, $mdDialog, $mdToast) {…}

[/js]

Теперь создадим новую функцию, которая будет открывать новый диалог по нажатию на fab-кнопку:

[js]

$scope.showAdd = function(ev) {

$mdDialog.show({

controller: AddDialogCtrl,

template: ‘ <form name="userForm"> New Task </form> <div class="md-actions" layout="row"> Cancel Add task </div>’,

targetEvent: ev,

})

.then(function(task) {

$scope.addTask(task);

$mdToast.showSimple(‘Task “’ + task + ‘” was added!’);

});

};

[/js]

Как видите, функция show от $mdDialog принимает html-шаблон с диалогом, а так же новый контроллер, который мы сейчас и создадим:

[js]

function AddDialogCtrl($scope, $mdDialog) {

$scope.hide = function() {

$mdDialog.hide();

};

$scope.cancel = function() {

$mdDialog.cancel();

};

$scope.add = function(task) {

$mdDialog.hide(task);

};

};

[/js]

И конечно же, не забываем добавить функцию addTask(), которая будет добавлять нашу новую задачу в общий массив на первую позицию:

[js]

$scope.addTask = function (task) {

$scope.myTasks.unshift({

‘title’: task,

‘done’: false

});

};

[/js]

В итоге, у меня main.js выглядит следующим образом:

[js]

var app = angular.module(‘todoApp’, [‘ngMaterial’]);

app.controller(‘AppCtrl’, [‘$scope’, ‘$mdDialog’, ‘$mdToast’, function($scope, $mdDialog, $mdToast){

$scope.options = {

name: ‘My Todo List’,

show: ‘All tasks’

};

$scope.navigationBarItems = [

{‘title’: ‘All tasks’, ‘icon’: ‘list’},

{‘title’: ‘Todo’, ‘icon’: ‘assignment’},

{‘title’: ‘Done’, ‘icon’: ‘done’}

];

$scope.myTasks = [

{‘title’: ‘Learn AngularJs’, ‘done’: false},

{‘title’: ‘Create first app with Electron’, ‘done’: true}

];

$scope.setContent = function (content) {

$scope.options.show = content;

};

$scope.addTask = function (task) {

$scope.myTasks.unshift({

‘title’: task,

‘done’: false

});

};

$scope.showAdd = function(ev) {

$mdDialog.show({

controller: AddDialogCtrl,

template: ‘ <form name="userForm"> New Task </form> <div class="md-actions" layout="row"> Cancel Add task </div>’,

targetEvent: ev,

})

.then(function(task) {

$scope.addTask(task);

$mdToast.showSimple(‘Task “’ + task + ‘” was added!’);

});

};

}]);

function AddDialogCtrl($scope, $mdDialog) {

$scope.hide = function() {

$mdDialog.hide();

};

$scope.cancel = function() {

$mdDialog.cancel();

};

$scope.add = function(task) {

$mdDialog.hide(task);

};

};

[/js]

На этом пока что все, экспериментируй, расширяйте возможности