Информационный портал по безопасности. Создание нового приложения. Далее: создание приложения

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

ВАЖНО: Это профессиональные шаблоны - НЕ ДЛЯ НОВИЧКОВ!!!

Как минимум вы должны хорошо владеть HTML и CSS.

Некоторые шаблоны содержат две версии: обычный HTML и Flash-вариант.

ВНИМАНИЕ! Все права на шаблоны указаны в их копирайтах.

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

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

Чтобы лучше понять что же из себя представляет шаблон - скачайте один из шаблонов - Скачать шаблон

На странице Пример анализа шаблона №4873 "Солидный бизнес" показан разбор одного из шаблонов.

Если хотите более подробно ознакомиться с каким-либо шаблоном - маякните на [email protected]

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

• Перевод

В наши дни сложные Javascript-приложения можно увидеть повсюду. Со временем они становятся все сложнее и уже неприемлемо просто писать цепочку callback-функций на jQuery. Javascript-программисты постепенно узнают то, что обычные разработчики знали уже несколько десятилетий. Организация и эффективность может сыграть важную роль при разработке. Таким образом, такие MVC-фреймворки на Javascript, как Backbone, Knockout и Ember появились для того, чтобы заполнить пустоту между начинающими, средними и опытными разработчиками. Они предлагают разные возможности и функционал, который подойдет разным людям, в зависимости от их потребностей.

Я считаю себе довольно хорошим разработчиком… далеко не лучшим, но я умею работать с существующими технологиями, которые применяю в своих разработках. Я следил за этими фреймворками и мне подошли Backbone и Ember. Я игрался с Backbone, даже купил видео-учебник по нему. Он хороший, но мне до сих пор трудно заставить себя мыслить как он. Я услышал об Ember всего несколько месяцев назад и он все набирает обороты. Он предлагает множество функций, которые мне нужны и я решил посмотреть, насколько он мне подходит. Ember предоставляет несколько ключевых фич, которые мне кажутся очень привлекательными, главной из которых является привязка данных. Вы просто создаете переменную, и, когда значение этой переменной изменяется, обновляется любая часть вашего приложения, которая следит за этой переменной. Это нашло бы свое применение, например, в чатах и т. д.

На данный момент главный недостаток Ember по сравнению с Backbone в том, что у последнего есть множество учебников, статей и готовых проектов на Github. В то время, как по Ember вы можете найти совсем немного материалов в сети, которые сразу показывают все его внутренности, но упускают самые основы. Так что моя цель – написать туториал, который поможет начать вам использовать Ember уже сейчас. Ну и кроме всего прочего я пишу эту статью, чтобы закрепить свои собственные знания.

Ember.js построен на архитектуре MVC (Model-View-Controller) и вы просто должны разделять свой код на 3 части:

• M = Модель – похожа на массив. Здесь хранятся данные, которые будут использоваться вашим приложением.
• V = Представление – это визуальная часть вашего приложения - формы, списки и т. д.
• C = Контроллер – думайте о контроллере, как о регулировщике движения. Он управляет взаимодействием между другими частями приложения. Когда пользователь нажимает на кнопку, контроллер определяет, какое представление должно быть загружено, которое в свою очередь определяет, какую модель использовать для сохранения данных.

Ну что, начнем? Для начала скачайте Ember.js Starter Kit . Распакуйте его в директорию, у которой есть доступ с веб-браузера. Откройте index.html и js/app.js в вашем любимом текстовом редакторе. В app.js добавьте следующую строку:

Welcome = Ember.Application.create();

Поздравляю! Вы создали свое первое приложение на Ember! Откройте index.html в вашем браузере и придите в восторг от вашего нового сайта. Ой, постойте, там же ничего нет… что вы думаете по этом поводу? Ничего не появилось кроме заголовка и это прекрасно. Все что произошло – это то, что Ember создал приложение, которое вы будете использовать на протяжении всего урока. Некоторые разработчики предпочитают называть это пространством имен. Это просто означает, что все другие части вашего приложения будут начинаться с имени, которое вы выбрали. Это помогает избежать конфликта имен переменных и держит все в порядке.

Есть одна вещь, к которой большинство jQuery-разработчиков очень привыкли – старый добрый document.ready . Ember предлагает нечто подобное, принимая необязательный объект в метод create . Добавьте код, перезагрузите страницу и вы должны увидеть поздравление. Погладьте себя по голове… вы это заслужили!

Welcome = Ember.Application.create({ ready: function(){ alert("Вы сделали это!"); } });

Следующее, что нам нужно сделать – это добавить Модель. Каждое приложение на Ember может иметь множество моделей и каждая из них – это уникальный тип данных. В некоторых фреймворках модель представляется в виде класса. В общем, это просто структура, которая говорит нам, как работать с этим объектом. Давайте создадим модель для некоторых из моих любимых книг.

Welcome.Book = Ember.Object.extend({ title: null,

Следующее, что нам нужно – это контроллер. Кстати, кроме управления приложением, контроллеры в Ember так же передают данные из модели в представление. Вот простой контроллер на Ember:

Welcome.booksController = Ember.ArrayController.create();

Несовсем похоже на создание контроллера, но здесь создается ArrayController, который содержит массив. Именно здесь будет сохраняться информация о наших книгах. Она там, вы просто не видите ее. Вы можете явно указать содержимое массива, или, например, заполнить его. Это осуществляется путем передачи необязательного объекта метод create:

Welcome.booksController = Ember.ArrayController.create({ content: });

Теперь у нас есть модель и контроллер – осталось только написать представление. Помните, я говорил, что представление – визуальная часть вашего приложения? Значит это будет находится в файле index.html . Давайте сначала напишем наше представление, а потом обсудим его. Прямо под тег H1 добавьте следующее:
{{#view Ember.Button target="Welcome.booksController" action="loadBooks"}} Load Books {{/view}} {{#collection contentBinding="Welcome.booksController" tagName="ul"}} {{content.title}} - {{content.author}}, {{content.genre}} {{/collection}}

Одна из замечательных особенностей Ember – это то, что он поставляется с встроенным шаблонизатором Handlebars. По сути шаблоны являются ключевой магией Ember. Обычно в шаблонах вы окружаете переменную какой-то строкой. В Handlebars это 2 фигурные скобки.

Ember начал свое существование как билиотека SproutCore, разработанная в Apple, как ядро для их онлайн-приложений, таких как Mobile Me. SproutCore также включал в себя набор виджетов, которых нет в Ember. Ember включает в себя только предоставления для элементов форм, потому что они могут быть очень динамичными. В случае нашего шаблона, или представления, мы используем кнопки Ember. Это позволяет ему сделать всю тяжелую работу за нас. Он принимает цель (в нашем случае – booksController) и дейстие. Поэтому, когда кто-то нажимает на кнопку, Ember будет работать с методом loadBooks объекта Welcome.booksController .

Вторая часть немного сложнее, но я уверен, что вы разберетесь. В Ember коллекция – это просто указатель на группу данных, в нашем случае это опять Welcome.booksController . В начале статьи я писал, что связанные данные – одна из причин, по которой Ember меня заинтересовал. И здесь мы можем увидеть всю его мощь. Content просто указывает на переменную content в booksController , в то время, как Binding является той самой волшебной пылью. Добавление Binding к концу большинства атрибутов говорит Ember о том, что вы хотите сделать двустороннее связывание. Вы изменяете значение на одной стороне, а другая будет обновляться. Наконец, коллекции позволяют установить базовый тег, в нашем случае это просто маркированный список (тег UL).

Кстати, символы # и / говорят Handlebars о том, что это только часть (блок) представления.

Внутри коллекции находится “мясо” наших шаблонов. Обратите внимание, как мы смешиваем HTML и теги внутри наших шаблонов. Удобно, не правда ли? Друга тонкость состоит в том, что Ember не нуждается в явном указании открывающих или закрывающих тегов для списка. Он добавит их автоматически, потому что знает, что мы используем маркированный список. Запустите приложение и вы увидите одинокую кнопку, которой нужны друзья. Нажатие кнопки делает ее несчастной, т. к. у нас еще нет метода loadBooks . Как насчет того, чтобы добавить его и загрузить немного данных?

Welcome.booksController = Ember.ArrayController.create({ content: , loadBooks: function(){ var self = this; $.getJSON("data/books.json", function(data) { data.forEach(function(item){ self.pushObject(Welcome.Book.create(item)); }); }); } });

Помните, мы говорили, что модели могут содержать произвольные методы? Все в Ember может содержать произвольный код, в том числе и ArrayController . Теперь, когда вы загрузите свою страницу и нажмете кнопку “Load Books” - будет вызван метод loadBooks , который загрузит некоторые из моих любимых книг. Вот и все для этого простого примера. Я надеюсь, что вам понравилось и вы дадите Ember шанс. Вы можете

В наши дни сложные Javascript-приложения можно увидеть повсюду. Со временем они становятся все сложнее и уже неприемлемо просто писать цепочку callback-функций на jQuery. Javascript-программисты постепенно узнают то, что обычные разработчики знали уже несколько десятилетий. Организация и эффективность может сыграть важную роль при разработке. Таким образом, такие MVC-фреймворки на Javascript, как Backbone, Knockout и Ember появились для того, чтобы заполнить пустоту между начинающими, средними и опытными разработчиками. Они предлагают разные возможности и функционал, который подойдет разным людям, в зависимости от их потребностей.

Я считаю себе довольно хорошим разработчиком… далеко не лучшим, но я умею работать с существующими технологиями, которые применяю в своих разработках. Я следил за этими фреймворками и мне подошли Backbone и Ember. Я игрался с Backbone, даже купил видео-учебник по нему. Он хороший, но мне до сих пор трудно заставить себя мыслить как он. Я услышал об Ember всего несколько месяцев назад и он все набирает обороты. Он предлагает множество функций, которые мне нужны и я решил посмотреть, насколько он мне подходит. Ember предоставляет несколько ключевых фич, которые мне кажутся очень привлекательными, главной из которых является привязка данных. Вы просто создаете переменную, и, когда значение этой переменной изменяется, обновляется любая часть вашего приложения, которая следит за этой переменной. Это нашло бы свое применение, например, в чатах и т. д.

На данный момент главный недостаток Ember по сравнению с Backbone в том, что у последнего есть множество учебников, статей и готовых проектов на Github. В то время, как по Ember вы можете найти совсем немного материалов в сети, которые сразу показывают все его внутренности, но упускают самые основы. Так что моя цель – написать туториал, который поможет начать вам использовать Ember уже сейчас. Ну и кроме всего прочего я пишу эту статью, чтобы закрепить свои собственные знания.

Ember.js построен на архитектуре MVC (Model-View-Controller) и вы просто должны разделять свой код на 3 части:

• M = Модель – похожа на массив. Здесь хранятся данные, которые будут использоваться вашим приложением.
• V = Представление – это визуальная часть вашего приложения - формы, списки и т. д.
• C = Контроллер – думайте о контроллере, как о регулировщике движения. Он управляет взаимодействием между другими частями приложения. Когда пользователь нажимает на кнопку, контроллер определяет, какое представление должно быть загружено, которое в свою очередь определяет, какую модель использовать для сохранения данных.

Ну что, начнем? Для начала скачайте Ember.js Starter Kit . Распакуйте его в директорию, у которой есть доступ с веб-браузера. Откройте index.html и js/app.js в вашем любимом текстовом редакторе. В app.js добавьте следующую строку:

Welcome = Ember.Application.create();

Поздравляю! Вы создали свое первое приложение на Ember! Откройте index.html в вашем браузере и придите в восторг от вашего нового сайта. Ой, постойте, там же ничего нет… что вы думаете по этом поводу? Ничего не появилось кроме заголовка и это прекрасно. Все что произошло – это то, что Ember создал приложение, которое вы будете использовать на протяжении всего урока. Некоторые разработчики предпочитают называть это пространством имен. Это просто означает, что все другие части вашего приложения будут начинаться с имени, которое вы выбрали. Это помогает избежать конфликта имен переменных и держит все в порядке.

Есть одна вещь, к которой большинство jQuery-разработчиков очень привыкли – старый добрый document.ready . Ember предлагает нечто подобное, принимая необязательный объект в метод create . Добавьте код, перезагрузите страницу и вы должны увидеть поздравление. Погладьте себя по голове… вы это заслужили!

Welcome = Ember.Application.create({ ready: function(){ alert("Вы сделали это!"); } });

Следующее, что нам нужно сделать – это добавить Модель. Каждое приложение на Ember может иметь множество моделей и каждая из них – это уникальный тип данных. В некоторых фреймворках модель представляется в виде класса. В общем, это просто структура, которая говорит нам, как работать с этим объектом. Давайте создадим модель для некоторых из моих любимых книг.

Welcome.Book = Ember.Object.extend({ title: null, author: null, genre: null });

Следующее, что нам нужно – это контроллер. Кстати, кроме управления приложением, контроллеры в Ember так же передают данные из модели в представление. Вот простой контроллер на Ember:

Welcome.booksController = Ember.ArrayController.create();

Несовсем похоже на создание контроллера, но здесь создается ArrayController, который содержит массив. Именно здесь будет сохраняться информация о наших книгах. Она там, вы просто не видите ее. Вы можете явно указать содержимое массива, или, например, заполнить его. Это осуществляется путем передачи необязательного объекта метод create:

Welcome.booksController = Ember.ArrayController.create({ content: });

Теперь у нас есть модель и контроллер – осталось только написать представление. Помните, я говорил, что представление – визуальная часть вашего приложения? Значит это будет находится в файле index.html . Давайте сначала напишем наше представление, а потом обсудим его. Прямо под тег H1 добавьте следующее:

{{#view Ember.Button target="Welcome.booksController" action="loadBooks"}} Load Books {{/view}} {{#collection contentBinding="Welcome.booksController" tagName="ul"}} {{content.title}} - {{content.author}}, {{content.genre}} {{/collection}}

Одна из замечательных особенностей Ember – это то, что он поставляется с встроенным шаблонизатором Handlebars. По сути шаблоны являются ключевой магией Ember. Обычно в шаблонах вы окружаете переменную какой-то строкой. В Handlebars это 2 фигурные скобки.

Ember начал свое существование как билиотека SproutCore, разработанная в Apple, как ядро для их онлайн-приложений, таких как Mobile Me. SproutCore также включал в себя набор виджетов, которых нет в Ember. Ember включает в себя только предоставления для элементов форм, потому что они могут быть очень динамичными. В случае нашего шаблона, или представления, мы используем кнопки Ember. Это позволяет ему сделать всю тяжелую работу за нас. Он принимает цель (в нашем случае – booksController) и дейстие. Поэтому, когда кто-то нажимает на кнопку, Ember будет работать с методом loadBooks объекта Welcome.booksController .

Вторая часть немного сложнее, но я уверен, что вы разберетесь. В Ember коллекция – это просто указатель на группу данных, в нашем случае это опять Welcome.booksController . В начале статьи я писал, что связанные данные – одна из причин, по которой Ember меня заинтересовал. И здесь мы можем увидеть всю его мощь. Content просто указывает на переменную content в booksController , в то время, как Binding является той самой волшебной пылью. Добавление Binding к концу большинства атрибутов говорит Ember о том, что вы хотите сделать двустороннее связывание. Вы изменяете значение на одной стороне, а другая будет обновляться. Наконец, коллекции позволяют установить базовый тег, в нашем случае это просто маркированный список (тег UL).

Кстати, символы # и / говорят Handlebars о том, что это только часть (блок) представления.

Внутри коллекции находится “мясо” наших шаблонов. Обратите внимание, как мы смешиваем HTML и теги внутри наших шаблонов. Удобно, не правда ли? Друга тонкость состоит в том, что Ember не нуждается в явном указании открывающих или закрывающих тегов для списка. Он добавит их автоматически, потому что знает, что мы используем маркированный список. Запустите приложение и вы увидите одинокую кнопку, которой нужны друзья. Нажатие кнопки делает ее несчастной, т. к. у нас еще нет метода loadBooks . Как насчет того, чтобы добавить его и загрузить немного данных?

Welcome.booksController = Ember.ArrayController.create({ content: , loadBooks: function(){ var self = this; $.getJSON("data/books.json", function(data) { data.forEach(function(item){ self.pushObject(Welcome.Book.create(item)); }); }); } });

Помните, мы говорили, что модели могут содержать произвольные методы? Все в Ember может содержать произвольный код, в том числе и ArrayController . Теперь, когда вы загрузите свою страницу и нажмете кнопку “Load Books” - будет вызван метод loadBooks , который загрузит некоторые из моих любимых книг. Вот и все для этого простого примера. Я надеюсь, что вам понравилось и вы дадите Ember шанс. Вы можете скачать исходный код примера на Github .

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

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

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

Ember.js - это как раз то, что нам нужно, если речь идёт о сложных одно-страничных приложениях. С его помощью, можно не усложняя себе жизнь, создавать сложные приложения. В его основу разработчики заложили возможность работы по принципу MVC.

Главной целью данных статей будет знакомство с Ember.js, его различными сторонами и возможностями. Сегодня мы начнём с общих понятий, но в дальнейшем приступим к реализации примеров.

Давайте же приступим!

Первое, что вы должны понять, так это то, что Ember.js - это фрэймворк для создания нетрадиционных сайтов. Такие фрэймворки, как jQuery и Mootools, больше подходят для классических сайтов. Приложения, создаваемые на основе Ember.js, больше похожи на настольные приложения.

Как я уже упоминал ранее, Ember.js использует MVC в качестве системы распределения кода. Если совсем ничего не знаете о MVC, то вам нужно прочитать самую простую статью, где описывается работа по данной схеме. Если вы когда-то использовали Backbone.js, то понять Ember.js вам не составит труда.

В Ember.js очень часто используются шаблоны, которые работают на базе библиотеки Handlebars . С её помощью мы можем писать шаблоны для генерации динамического HTML кода. Средствами Ember.js мы будем передавать в шаблон данные. Ниже приведён пример шаблона вывода пользователей в ненумерованном списке:

{{#each people}}
• Hello, {{name}}!
{{/each}}

Ключевое слово #each означает обычный цикл, в котором будут прокручиваться записи из переменной people. Выражениями типа {{name}}, мы будем извлекать нужную информацию. Более сложные примеры, мы разберём позже.

Handlebars - это действительно хороший шаблонизатор, который может использоваться отдельно от Ember.js. На их официальном сайте вы можете найти дополнительную информацию.

Ember.js работает на основе других библиотек, так что вам нужно будет подключить jQuery и Handlebars . Стоп! Не я ли ранее сказал что jQuery и Ember предназначены для разных целей? Да, но на самом деле ситуация выглядит несколько иначе: команда разработчиков решила не изобретать колесо. Они выбрали jQuery, для того чтобы с его помощью делать то, что у него лучше всего получается: манипулировать DOM-ом. Подобными мыслями они руководствовались при подключении Handlebars.

На самом деле, вам не нужно бегать по разным сайтам за нужными ссылками библиотек. Всё нужное вы сможете найти на странице Ember.js на гитхабе. Качаем Starter-kit и получаем:

• Ember 1.0 RC1
• Handlerbars 1.0 RC3
• jQuery 1.9.1

Все эти файлы сразу распределены по папкам. Для нашего приложения лучше всего создать собственный файл. Назовём его app.js:

Прежде чем писать какой-то код, лучше сначала узнать основные возможности Ember.js

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

{{firstName}} {{lastName}}

Всё это мы пишем непосредственно в HTML документе. Затем, при запуске страницы Ember запустит свои механизмы, и все шаблоны заполнятся информацией. В этом примере мы выводим значения двух переменных: {{firstName}} и {{lastName}}.

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

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

App.Router.map(function() { this.route("about"); // Takes us to "/about" });

Поведение маршрута (передача данных из модели) определяется при помощи глобального объекта Ember, отвечающего за навигацию по приложению. Пример извлечения данных из модели выглядит следующим образом:

App.EmployeesRoute = Ember.Route.extend({ model: function() { return App.Employee.find(); } });

Как только пользователь перейдёт по адресу “/employees”, то маршрутизатор сделает обращение к модели и вытащит список работников.

Модели предназначены для приёма или возврата объектных представлений данных, которые используются в нашем приложении. Это может быть просто массив или JSON ответ от стороннего PHP файла. Библиотека Ember Data предоставляет хороший API для маппинга и обновления данных.

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

Вы должны хорошо понять, что контроллер предназначен для распространения данных, которые он получает из модели.

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

В рамках Ember.js представления предназначены для отслеживания событий, совершаемых пользователем, и трансформации их в то, что нужно для реагирования вашего приложения. Если пользователь кликнул по кнопке, чтобы удалить контакт, представление отследит это событие и сообщит приложению, в какое состояние ему нужно перейти.

Используя Ember.js, можно сократить количество кода за счёт установленной для себя системы именования объектов. В зависимости от того, как вы назовёте маршрут, зависит имя контроллера, модели, представления и шаблона. К примеру, мы создали маршрут “employees”:

App.Router.map(function() { this.resource("employees"); });

Я назову свои компоненты следующим образом:

• Маршрут: App.EmployeesRoute
• Контроллер: App.EmployeesController
• Модель: App.Employee
• Представление: App.EmployeesView
• Шаблон: employees

Подобное правило именования удобно по нескольким причинам. Во-первых, мы сразу же видим семантическую связь между компонентами. Во-вторых, Ember сможет самостоятельно создать объекты, которых будет не хватать. Всё это возможно при инициализации приложения:

Var App = Ember.Application.create();

Одна строчка задаёт отношения между контроллерами, объектами, представлениями и шаблонами:

• Маршрут: App.ApplicationRoute
• Контроллер: App.ApplicationController
• Представление: App.ApplicationView
• Шаблон: application

При навигации на адрес “/employees”, Ember активирует другие ресурсы:

• App.EmployeesRoute
• App.EmployeesController
• шаблон employees

Если таковых объектов в приложении нет, Ember создаст их, но ничего не выведет до тех пор, пока вы не создадите модель, которая вернёт данные для вывода. Вот почему правила именования компонентов очень важны. Оно поможет Ember определить, какие ресурсы подключать без ручной настройки.

На сегодня всё. Мы познакомились с Ember.js и её компонентами. В следующих частях этой серии статей займёмся практическим использованием данной библиотеки и на практике попробуем многое из того, что предоставляет нам Ember.