Введение В такой среде, как веб-разработка, всегда есть куда развиваться. Поэтому Вам нужно следить за появлением новых продуктов, позволяющих сделать Ваш сайт лучше и интереснее. В этой статье Вы ознакомитесь с полезными JQuery плагинами, а также различными другими инструментами. Они помогут Вам работать качественнее и быстрее. Solo: Бесплатный сервис управления проектами для фрилансеров fullPage.js: Библиотека для создания полноэкранных сайтов со скроллингом Apiary: Сервис создания API   TogetherJS TogetherJS – бесплатная библиотека JavaScript с открытым кодом от Mozilla, предоставляющая функции совместной работы для вашего веб-сайта. После добавления TogetherJS на Ваш сайт, пользователи смогут помогать друг другу на сайте в режиме реального времени. Semantic UI Semantic UI делает построение веб-сайтов более семантически правильным. Он использует принципы “natural language”, что делает код более читаемым и понятным. mailpile Mailpail – современный и быстрый web-mail-клиент с удобным интерфейсом, обеспечивающий функции шифрования и конфиденциальности. Google Webdesigner С Google Webdesigner Вы можете сделать дизайн Вашего веб-сайта на основе HTML5 более увлекательным, добавить интерактивные элементы, запускающиеся на любом устройстве. Grid forms Grid forms предназначены для использования в приложениях, требующих много данных для ввода. Это крошечный Javascript/CSS framework, с его помощью Вы с легкостью сделаете формы на сетке. jInvertScroll JInvertScroll – это легкий jQuery плагин, позволяющий добавить Parallax эффект при прокрутке страницы вниз. Он очень прост в установке и не требует, практически, никакой настройки. Naver: jQuery плагин для адаптивной навигации Naver – простой способ сделать быстрореагирующую навигационную систему, поддерживаемую мобильными устройствами. Monsta FTP MonstaFTP – менеджер с открытым исходным кодом. Источник: http://www.designyourway.net/blog/resources/plugins-and-tools-to-help-you-create-better-websites/

Введение В данной статье сравнивается четыре самых популярных браузерных движка для WinForms, а именно WebBrowser, Gecko, Awesomium и OpenWebKitSharp. Исходники для работы: WebBrowser - 75.9 KB Awesomium - 16.7 MB GeckoFX - 9.9 MB OpenWebKitSharp - 24.6 MB     Небольшие сравнительные характеристики WebBrowser Стандартный браузерный движок .NET фреймворка. Ядро – MSHTML + Active-X, включающий в себя COM IWebBrowser2 MSHTML IWebBrowser2. Может использоваться для Winforms и WPF. Gecko Сторонний браузерный движок. Ядро – XULRunner, используемый в браузере Firefox. Имеет только поддержку Winforms. Awesomium WebControl Сторонний браузерный движок с настраиваемым внешним ядром. Ядро - .NET, WebKit. Поддерживается Mono, WPF и Winforms. OpenWebKitSharp Сторонний браузерный движок. Ядро – WebKit, используемый в браузерах Safari и Chromium (Chrome). Имеет только поддержку Winforms.   WebBrowser Gecko Awesomium OpenWebKitSharp Лицензия Бесплатная Бесплатная. Open-source: MPL 1.1/GPL 2.0/LGPL 2.1 Бесплатная, если Ваш проект имеет прибыть в $100 тис. (можно купить за $2900) Бесплатная Платформы Winforms, WPF Winforms Winforms, WPF, Unity, Mono, SDL Winforms Тип процессора Любой ? X86 ? Скорость загрузки страницы Низкая Средняя Высокая Высокая Требуемые размеры библиотеки DLL 0MB 22.4MB 40.5MB 64.6MB Остановка GUI при загрузке страницы Нет Нет Да Да Минимальная требуемая версия .NET .NET 2.0 или более ранняя .NET 2.0 или более ранняя .NET 4.0 ? Объект, метод, свойство модели - WebBrowser-identical Не WebBrowser-identical WebBrowser-identical, но многие методы и свойства не работают Использование контента DOM – set HTML Да Да Да Только с помощью JS Использование контента DOM – get HTML Да Да Да, но не работают с отключенным JS Только с помощью JS DOM – GetElementById Да Да Только с помощью JS ? DOM – GetElementsByClassName Только с помощью JS Да Только с помощью JS ? DOM – GetElementsByTagName Да Да Только с помощью JS ? Встраивание JavaScript Да Да Да Да Отключение JavaScript Нет Да Да ? Настройка прокси-сервера Нет Да Да ? Встроенный визуальный редактор HTML Да ? Нет Нет Проверка HTML синтаксиса Нет ? Да Да Встроенный менеджер загрузок ? ? ? Да Использование WebBrowser Встроенный визуальный редактор HTML webBrowser1.Document.DomDocument.GetType().GetProperty("designMode").SetValue (webBrowser1.Document.DomDocument, "On", null); Программная вставка HTML элемента  // appends: // //   //    src="http://dj9okeyxktdvd.cloudfront.net/App_Themes/CodeProject/Img/logo250x135.gif" /> //           var mylink = webBrowser1.Document.CreateElement("a"); mylink.Id = "mylink"; mylink.SetAttribute("href", "http://codeproject.com/"); var myimg = webBrowser1.Document.CreateElement("img"); myimg.Id = "myimg"; myimg.SetAttribute("src", "http://dj9okeyxktdvd.cloudfront.net/App_Themes/CodeProject/Img/logo250x135.gif"); mylink.AppendChild(myimg); webBrowser1.Document.Body.AppendChild(mylink); Выбор DOM элемента – GetElementById  var id = "mylink"; var el = webBrowser1.Document.GetElementById(id); if (el != null) {     MessageBox.Show("Element with id=\"" + id + "\" has innerHTML: " + el.InnerHtml); } else {     MessageBox.Show("Element with id=\"" + id + "\" not found."); } Выбор DOM элемента – GetElementsByTagName var tag = "img"; var elz = webBrowser1.Document.GetElementsByTagName(tag); if (elz.Count > 0) {     MessageBox.Show(elz.Count + " elements with tag <" + tag + "> found."); } else {     MessageBox.Show("No elements with tag <" + tag + "> found."); } Использование контента DOM – set HTML  webBrowser1.DocumentText = "<html><head><script>alert('check!'); script>head><body>lorembody>html>"; Встраивание JavaScript  var head = webBrowser1.Document.GetElementsByTagName("head")[0]; var scriptEl = webBrowser1.Document.CreateElement("script"); scriptEl.SetAttribute("text", "function sayHello() { alert('hello') }"); head.AppendChild(scriptEl); webBrowser1.Document.InvokeScript("sayHello"); Использование Gecko  Использование контента DOM – set HTML geckoWebBrowser1.Document.DocumentElement.InnerHtml = "<html><head>head><body> <a class=\"link\">fa>body>html>";  Выбор DOM элемента – GetElementsByClassName (geckoWebBrowser1.Document.GetElementsByClassName("link")[0] as     Skybound.Gecko.GeckoElement).InnerHtml = "tt"; Использование Awesomium WebControl  Использование контента DOM – set HTML webControl1.HTML = "<html><head><script>alert ('check!');script>head><body>lorembody>html>"; Использование контента DOM – get HTML  var allhtml = webControl1.ExecuteJavascriptWithResult     ("document.documentElement.outerHTML"); Встраивание JavaScript  webControl1.ExecuteJavascript ("document.body.innerHTML += 'Hello, World!';"); Отключение JavaScript  var ws = WebCore.CreateWebSession(new WebPreferences() { Javascript = true }); webControl1 = new Awesomium.Windows.Forms.WebControl() { WebSession = ws }; this.Controls.Add(webControl1); Настройка прокси-сервера  var ws = WebCore.CreateWebSession(new WebPreferences() { ProxyConfig = "255.255.255:8080" }); webControl1 = new Awesomium.Windows.Forms.WebControl() { WebSession = ws }; this.Controls.Add(webControl1); Использование OpenWebKitSharp  Использование контента DOM – set HTML webKitBrowser1.GetScriptManager.EvaluateScript("document.body.innerHTML='';"); Выводы В каждом движке есть свои + и –, с которыми можно столкнутся при разработке браузера. В любом случае, только Вам решать, какой из движков подойдет под Ваш стиль разработки. Источник: http://www.codeproject.com/Tips/825526/Csharp-WebBrowser-vs-Gecko-vs-Awesomium-vs-OpenWeb?PageFlow=Fluid

Введение Путь любого веб-разработчика начинается с маленького шага, который, как ни странно, приходится на исследование всемирной сети Internet и множества веб-сайтов, на которых ищется информация об устройстве  всемирной паутины. Всемирная паутина – это растущая вселенная взаимосвязанных веб-страниц и веб приложений, ее наполняет видео, фотографии и другой интерактивный контент. Она обеспечивает слаженное взаимодействие веб-технологий и браузеров, которые развивались для того, чтобы дать разработчикам возможность создавать новые поколения полезных и всеобъемлющих веб-ресурсов. Сегодняшний интернет – это плод деятельности открытого веб-сообщества, которое помогает стандартизировать и развивать такие технологии, как HTML5, CSS3, JavaScript и множество связанных с ними фреймворков. Стандарты помогают убедиться в том, что все новейшие технологии будут поддерживаться популярными браузерами. Но был ли веб таким всегда, с момента его зарождения? Веб 0.0 – эра зарождения интернета Современный Интернет появился в далеком 1969 году в виде первой в мире сети с динамической маршрутизацией сообщений ARPAnet, которая была ничем иным, как объединением трех сетей в Калифорнии и сетью в штате Юта. Правила, по которым были объединены эти сети, в будущем легли в основу Интернет-протокола (Internet Protocol, известного нам как IP). В 1972 году эта сеть стала открытой для университетов и исследовательских институтов. Веб 1.0 – эра «Read-only» веб-ресурсов До 1999 года возможности рядового пользователя Всемирной паутины были ограничены чтением информации на страницах сайтов, которая предоставлялась их владельцами и авторами. В тот период внедрения веб технологий появлялось множество статических веб-сайтов. Сайты были предельно простыми. Ярким примером того времени служит веб-сайт, опубликованный создателями технологии Интернет в августе 1991 года, копия которого и сегодня существует на пространствах Интернет-пространства. Первый веб-сайт: http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html Чтобы создавать такие страницы, нужно знать только HTML. В те времена этого было достаточно. Сейчас таким образом сверстанная страница воспринимается, как оскорбление эстетического вкуса. Все мы хотим, чтобы информация на веб сайте была представлена красиво, стильно, удобно и структурированно. Веб 2.0 – эра «Read and write» веб-ресурсов. Отсутствие активных форм взаимодействия пользователей с веб-ресурсом привело к зарождению концепции Web 2.0. Знаменательным стал 1999 год и рождение таких ресурсов, как LiveJournal (апрель 1999 года) и Blogger (август 1999 года). С этого момента в истории интернета все пользователи, не обладающие техническими навыками, смогли самостоятельно вести блоги и активно взаимодействовать с сообществом своих читателей. Владельцы веб-ресурсов превратились в провайдеров услуг по размещению генерируемого контента во Всемирной паутине. Эта эра подарила пользователям несколько абсолютно новых и безумно популярных сегодня понятий: блоги, социальные и медиа-ресурсы, потоковое видео. Для того, чтобы опубликовать контент в сети, теперь не нужно изучать специальные технологии. Все больше и больше сообщений публикуется в Twitter, Flickr, Facebook, YouTube и других ресурсах. Веб стал более технологичным – если раньше для отображения обновлений контента нужно было перегружать всю страницу, сейчас достаточно обновить ее часть благодаря технологии Ajax (Asynchronous JavaScript and XML). Все больше внимания уделяется серверной части при разработке веб приложений, поскольку именно она обеспечивает логику и надежность продукта в целом. Это, в свою очередь, подтолкнуло к развитию технологии ASP.NET. Веб 3.0 – эра семантической паутины Следующим шагом в истории Всемирной паутины является переход к семантической разметке и широкому распространению веб-сервисов. Семантическая разметка способствует более быстрому восприятию информации человеком. Для этого на странице делаются соответствующие выделения заголовков, разделов, ключевых слов – самых главных моментов, на которые должен обратить внимание пользователь. Логику пользователя стараются предугадать и помочь идти в нужном направлении. Ведь, если пользователь быстро не находит интересующую его информацию на этом ресурсе, он уйдет на другой сайт. Борьба за внимание пользователя – одна из особенностей эпохи Web 3.0. Эволюция всемирной паутины не остановиться до тех пор, пока будет увеличиваться количество производимой и публикуемой информации в сети и будут расти потребности пользователей. К этому стоит добавить, что информация генерируется не только пользователями, но и их устройствами, в фоновом режиме. Сможем ли мы грамотно распоряжаться этой информацией, рационально ее воспринимать – вопрос открытый. В любом случае нам стоит подготовиться к тому, что влияние web-технологий с каждым годом будет только увеличиваться.

Введение Microsoft Azure является облачно-вычислительной платформой и инфраструктурой, предоставленной корпорацией Microsoft. Эта платформа выполняет такие функции, как построение, развертывания и управления приложениями и услугами, и они могут быть доступны по всему миру. Azure доступен как Платформа, как сервис (PaaS) и Инфраструктура, как сервис (IaaS). Чтобы сделать развертывание приложения.NET на Microsoft Azure, Visual Studio 2012 и Visual Studio 2013 предоставляет Вам необходимые инструменты. Вы можете загрузить полную версию Visual Studio 2013 года здесь. Чтобы использовать Azure, сначала нужно посетить сайт manage.windowsazure.com и подписаться на эту услугу. Вы также можете получить бесплатную пробную подписку, чтобы начать работу. После входа на портал, на следующем рисунке продемонстрированы некоторые службы/функции, которые можно получить: В этой статье мы будем использовать приложение, созданное с помощью Angular.js, MVC, WEB API для выполнения CRUD-операций. Мы будем публиковать приложения на Azure в качестве веб-сайта. Загрузите исходный код и откройте это приложение в Visual Studio 2013. Создание сервера базы данных с помощью SQL Azure Чтобы успешно запустить веб-сайт, Вы должны развернуть базу данных, используемую нашим веб-сайтом в облаке. Чтобы развернуть базу данных Azure, нужно создать сервер базы данных, используя Azure SQL. Шаг 1: Выберите SQL DATABASES, и Вы увидите страницы базы данных, как показано здесь: Выберите Servers, это позволит создать новую базу данных SQL SERVER. Нажмите кнопку  "CREATE A SQL SERVER DATABASE", ниже появится окно: Введите необходимые данные. После ввода данных выберите галочку в нижнем углу, чтобы создать базу данных сервера: Кликаем на кнопку "MANAGE" внизу страницы, это позволит Вам добавить сервер доступа в правила брандмауэра, так чтоб был получен доступ к приложению. Эти правила добавят IP-адрес вашей машины в правила брандмауэра. Чтоб узнать имя экземпляра сервера базы данных, кликаем по имени базы данных для отображения информационной панели. Прокрутите вниз страницы панели мониторинга для отображения MANAGE URL. Она начинается от https://.database.windows.net. Часть URL после https://, имя экземпляра базы данных. Шаг 2: Чтобы Соединиться с сервером базы данных, скопируйте часть URL после http://, и от локального экземпляра SQL Server, кликаем по Connect на объектном проводнике, и в Connect To Server окно вводит детали базы данных как показано здесь: Это выведет на экран Сервер базы данных Azure SQL экземпляр в объектном проводнике на локальном экземпляре SQL Server. Введите необходимые параметры. SERVICE TIERS позволит выбрать уровень базы данных, таких как BASIC | STANDARD | PREMIUM. Выберите уровень BASIC. Выберите SEERVER как сервер базы данных, его мы создали ранее. Создаваемая база данных будет такая, как показано на изображении: Кликните по кнопке MANAGE внизу страницы, она создаст правило Брандмауэра для того, чтобы установить доступ базы данных: Далее откроется следующая страница, где информация об Администраторе Базы данных обязательна к заполнению: Клик на Log On выведет на экран следующую страницу:  Кликните по “Design”, чтобы составить таблицы, Views и Stored Procedures. Кликаем по “New Table” и создаем список сотрудников, как показано: Введите простые записи в эту таблицу, используя ссылку New Query. Внесение изменений в Web.config файл MVC-приложения Откройте приложения MVC в Visual Studio 2013 и внесите следующие изменения в строку подключения. data source=; initial catalog=Application; user id=; password=; MultipleActiveResultSets=True; App=EntityFramework" "providerName="System.Data.EntityClient" />   (В качестве альтернативы Вы можете запустить Entity Framework в проект, в папку Models для создания строки подключения) Создание Веб-Сайта С Помощью Windows Azure Portal Нажмите кнопку на сайте, чтобы отобразить параметры создания веб-сайта. Нажмите на ссылку CREATE A WEBSITE. Это приведет к появлению следующих вариантов для создания веб-сайта:     Далее Вы можете ввести информацию о URL. Введённый URL уникальный и будет проверен Azure. Если это имя не будет корректное, то URL будет .azurewebsites.net. Центр обработки данных должен быть выбран согласно Вашему выбору. Как только Центр обработки данных выбран, тогда все другие ресурсы, необходимые веб-сайту, например, Базы данных SQL, должны быть размещены в том же Центре обработки данных, так как это поможет в управлении затратами. Как только будет создан Веб-сайт, портал покажет детали:     Чтобы получить детали о веб-сайте, кликните по его имени, ниже будет выведена инструментальная панель на экран, она поможет в управлении и мониторинге веб-сайта.     Чтобы опубликовать наш веб-сайт, созданный с помощью VS tools в Visual Studio, мы должны загрузить профиль публикации. Он может быть загружен и скачан по ссылке, как продемонстрировано на изображении. Публикация веб-сайта в Visual Studio Откройте SPA Application в Visual Studio 2013. Кликните правой кнопкой по названию проекта, чтобы вывести на экран контекстное меню Publish Option.     Эта опция выведет на экран следующее окно:     Данное окно имеет следующие параметры: Microsoft Azure веб-сайтов - поддержка прямого входа на Windows Azure на основе подписки. Import - позволяет импортировать веб-сайт и публиковать профиль, который загружается с портала Azure. Custom - позволяет создать новый профиль, публиковать для развертывания веб-сайта.   Нажмите на кнопку "Import" и будет отображено следующее окно для импорта профиля публикации:     После нажатия "OK", будет отображено следующее окно с деталями веб-развертывания:     Кликните “Next”. Так как мы уже развернули базу данных по Azure SQL, и последовательность подключений к базе данных уже обновлена в web.config файле, следующее окно покажет строку подключения:     Выберите “Далее”, чтобы отобразить список файлов, которые будут опубликованы:     Кликните по кнопке “Publish”, веб-сайт будет опубликован со всеми требуемыми ссылками.  Как только веб-сайт будет успешно опубликован, он может быть просмотрен.     Примечание: в этой статье не использовался CSS и, следовательно, неправильно расположение таблиц. Добавьте свои CSS, чтобы украсить страницу. Таким образом происходит развертывание веб-сайта на Azure. Источник: http://www.dotnetcurry.com/showarticle.aspx?ID=1064

Введение Эта статья предназначена для начинающего разработчика, который впервые столкнулся с изучением AngularJS и сопутствующими технологиями, такими как GIT, node.js, Grunt, Bower. Вы могли много читать литературы по поводу перечисленных выше технологий, в этой статье мы лишь вкратце опишем, чем по сути является каждая из них, и как с ней работать. 1. Проходим по ссылке: https://docs.angularjs.org/tutorial и следуем всем инструкциям по установке. Не бойтесь, мы Вам в этом поможем! И постараемся вместе разобраться в основных понятиях современного Frontend Development'a :) Для начала нам следует установить git на свою ЭВМ :)       Коротко о git. Git — система для контроля версий файлов. Более обширное определение - это  ресурс, который позволяет разработчику или команде разработчиков контролировать версии своих приложений. Подробнее тут: https://ru.wikipedia.org/wiki/Git  Идем по ссылке в новой вкладке: http://git-scm.com/ и выбираем ту версию git, которая нас интересует, в соответствии с нашей операционной системой. Скачиваем файл для установки, с расширением .exe и устанавливаем в папку Program files. 2. Идем по ссылке в новой вкладке браузера https://github.com/ и регистрируемся. Github – самый крупный веб-сервер для хостинга (размещения) проектов разработчиков. Итак, мы это все сделали, далее скачиваем приложение из репозитория angular-phonecat, размещенного на Github. То есть, нашей задачей теперь будет взять и скачать готовое приложение себе на жесткий диск. 3. AngularJS – это JavaScript фреймфорк, который заточен под разработку одностраничных приложений. Официальный сайт AngularJS https://angularjs.org/ Основной идеей AngularJS является убеждение создателей оного, что декларативное программирование (парадигма программирования - описание программы, какая она по сути, а не то, как ее создать) находит применение в разработке внешнего вида приложения, а императивное программирование (парадигма программирования – в отличие от декларативного программирования, описывает процесс вычисления в виде инструкций, по сути, пошагово изменяет инструкции программы, похоже на приказы) используется для описания бизнес логики. AngularJS – расширяет HTML, чтобы создать двустороннюю привязку данных для динамического контента. Цели AngularJS: DOM-манипуляции не зависят от логики приложения. Параллельная разработка путем разделения клиентской части и серверной части приложения. Планирование разработчиком всех приложений – интерфейс, бизнес-логика, тестирование. Открываем терминал/консоль и перемещаемся в ту папку, в которую хотим сохранить проект с помощью команды cd Documents/ (эта команда означает - cd – change derictory на Documents) и нажимаем Enter  мы переместились в папку, где хранятся документы (просто потому, что мне так удобней, можно этого не делать и остаться в корне диска). Копируем следующую строку  git clone --depth=14 https://github.com/angular/angular-phonecat.git вставляем в терминал/консоль и нажимаем Enter. Эта строка создает папку angular-phonecat и копирует приложение с Git с последними 14 коммитами (изменениями). Ждем окончания копирования проекта. Далее переходим в директорию с нашим приложением командой     cd Documents/angular-phonecat  или cd angular-phonecat/   после жмем Enter и оказываемся в папке с приложением 4. У нас на жестком диске есть наше приложение, теперь нам следует установить node.js. Node.js – что такое node.js? Есть много статей, определений и объяснений. В общем и коротко: Node.js – это интерпретатор JavaScript. Приложение node.js получает js код и выполняет его. Нам надо установить node.js в папку с нашим приложением. Переходим по ссылке: http://nodejs.org/download/ качаем приложение и устанавливаем. 5. Вместе с node.js устанавливается и npm. Что такое npm? Npm – это node package manager. Npm устанавливает пакеты, которые прописаны в файле package.json перед установкой npm нам следует проверить, какая версия node.js установлена у нас. Это мы делаем командой в терминале: node –-version есть :) Теперь в терминале набираем следующее: npm install На выходе получаем такую структуру нашего проекта: Файл  package.json содержит в себе информацию о приложении, название, версию, установленные пакеты в приложении. Возможна установка пакетов как через файл package.json, так и через терминал. 6. Это не обязательно, но в будущем этот пакет Вам пригодится. Grunt – это Task Runner – автоматизатор процессов, позволяет проводить минификацию кода, сборку кода(компиляцию), тестирование. В терминале вводим следующее: npm install -g grunt-cli (-d   - говорит о том, что мы устанавливаем grunt глобально.) Дополнительно устанавливаем в директорию с приложением npm install grunt-cli теперь обновляем npm:  sudo npm update npm -g sudo - (substitute user and do – подменить пользователя и выполнить) – в Unix системах позволяет пользователям выполнять команды от имени суперпользователя root. В директории с приложением требуется создать файл Gruntfile.js, вложим в него код из официального примера http://gruntjs.com/sample-gruntfile в конце страницы - конечная версия файла, копируем код себе в файл. Или копируем отсюда: module.exports = function (grunt) {     grunt.initConfig({         pkg: grunt.file.readJSON('package.json'),         concat: {             options: {                 separator: ';'             },             dist: {                 src: ['src/**/*.js'],                 dest: 'dist/<%= pkg.name %>.js'             }         },         uglify: {             options: {                 banner: '/! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> /\n'             },             dist: {                 files: {                     'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']                 }             }         },         qunit: {             files: ['test/**/*.html']         },         jshint: {             files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],             options: {                 // options here to override JSHint defaults                 globals: {                     jQuery: true,                     console: true,                     module: true,                     document: true                 }             }         },         watch: {             files: ['<%= jshint.files %>'],             tasks: ['jshint', 'qunit']         }     });     grunt.loadNpmTasks('grunt-contrib-uglify');     grunt.loadNpmTasks('grunt-contrib-jshint');     grunt.loadNpmTasks('grunt-contrib-qunit');     grunt.loadNpmTasks('grunt-contrib-watch');     grunt.loadNpmTasks('grunt-contrib-concat');     grunt.registerTask('test', ['jshint', 'qunit']);     grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']); }; Пакеты, которые мы прописали в Gruntfile.js, следует установить через npm следующими командами: npm install grunt-contrib-uglify --save-dev npm install grunt-contrib-qunit --save-dev npm install grunt-contrib-concat --save-dev npm install grunt-contrib-jshint --save-dev Подробнее об установленных пакетах можно прочитать тут: https://github.com/gruntjs/grunt-contrib-uglify https://github.com/gruntjs/grunt-contrib-qunit https://github.com/gruntjs/grunt-contrib-concat https://github.com/gruntjs/grunt-contrib-jshint https://github.com/gruntjs/grunt-contrib-watch 7. Установка Bower и что это такое. Bower – менеджер пакетов для клиентской стороны приложения JS. Отличием Bower от Npm есть то, что Bower, если возникнет конфликт, не позволит Вам поставить несовместимый пакет(библиотеку), которая уже установлена, Bower ставит одну версию пакета. В терминале ставим глобально bower и пишем: npm install -g bower  и конечно ставим в директорию с проектом  bower install 8. Сongrats !!! Теперь у нас установлено приложение и мы можем запускать его, из файловой системы заходим в папку с приложением, потом в папку – app, находим файл и тапаем (двойной клик) по нему index.html или (что будет правильным) нужно зайти в терминал и ввести: npm start (запускаем сервер) и в браузере в омнибоксе (адресной строке) ввести: http://localhost:8000/app/index.html Wuala – наше приложение запускается и работает. Подробнее об AngularJS и как с ним работать вы можете узнать из курса AngularJS в учебном центре CyberBionic Systematics. Всем спасибо и удачного кода. 

Введение В наше время мир полностью компьютеризирован, на каждом шагу мы сталкиваемся с программным обеспечением, которое играет огромную роль в нашем «сегодня», делая вещи простыми в использовании. Таким образом, это является обязанностью каждого разработчика - разработать надежное программное обеспечение с максимально возможным отсутствием дефектов. Безусловно, тестировщики играют немаловажную роль в тестировании, но разработчик также должен понимать и ориентироваться в процессах. Разработчику нужно учитывать при разработке программного обеспечения надежность, а также уменьшать риск возникновения багов. Тестирование глазами разработчиков Тестирование - процесс выполнения программы или системы с целью нахождения ошибок. Также будет систематически раскрывать различные их классы при минимальных затратах времени и усилий. Процесс тестирования показывает, что программное обеспечение работает согласно спецификациям и данным, собранным посредством тестов. Они могут обеспечить индикацию относительной надежности и качества ПО. Это действие, которое должно быть реализовано еще во время цикла разработки ПО, до выпуска в производство, как процесс, демонстрирующий правильную работу ПО и отсутствие багов. Гарантия качества Гарантия качества относится к набору запланированных систематических операций, которые гарантируют соответствие процессов определенным стандартам, таких как ISO 9000 или SEI CMM. Они и обеспечивают определенную степень уверенности в качестве выпускаемого ПО. Действия, что обеспечивают качество продукта Следование инструкциям в соответствии с международными стандартами, выполнение внутренних аудитов, которые гарантируют соблюдение процедур (в тестировании - пошаговых инструкций). Детальное изучение требований к программному обеспечению - спецификаций, разработка планов тестирования, тестовые сценарии, выполнение тестов, создание автоматизированных сценариев тестирования и составление отчетов о дефектах. Валидация и верификация Валидация относится к набору операций, которые гарантируют правильную реализацию программным обеспечением определенных функций, описанных в спецификации, на каждом этапе выполняется определение действий, такие как анализ требований, проектирование, написание кода и т.д. Верификация относится к набору различных  операций, они гарантируют соответствие ПО потребительским требованиям, и действиям, которые по окончанию написания кода проверяют ПО на соответствие всем функциональным требованиям. Типы тестирования Есть несколько типов тестирования: Тестирование методом "белого ящика"; Тестирование методом "черного ящика"; Тестирование V-модели; Юнит-тестирование; Приемочные испытания; Интеграционное тестирование; Регрессионное тестирование. Тестирование методом "белого ящика" Тестирование методом "белого ящика" тестирует приложение сугубо на уровне кода. Это структурное или логически управляемое тестирование исходного кода приложения, которое гарантирует: Отладку багов; Занимаемую память; Комплексность кода; Анализ кода; Покрытие кода. Методы «белого ящика» или «стеклянного ящика» - испытания на прочность системы, данный метод основан на знании внутренней структуры и логики. Тестирование методом "белого ящика" - метод разработки тестового сценария, который использует управляющие структуры процедурного проекта. Созданные тестовые сценарии должны гарантировать: Осуществление всех независимых путей в юните, по крайней мере, один раз; Выполнение всех логических действий с наличием положительного или отрицательного результата; Выполнение всех циклов в рамках их операционных границ; Проверку внутренних структур данных на законность. Тестирование методом "черного ящика" Это тестирование управления данными в целях гарантии функциональности приложения при условии наличия спецификации требований и ожидаемого вывода, но содержание/код программы остаются неизвестными или неважными. Некоторые методы: Эквивалентность классов; Граничный анализ;        Анализ худшего случая. Тестирование методом "черного ящика" - функциональное испытание на основе внешних спецификаций без ведома того, как система обычно реализует процесс и/или управляет данными. «Черный ящик» не является альтернативой тестированию методом «белого ящика». Тестирование методом "черного ящика" пытается найти ошибки в следующих категориях: Неправильные или недостающие функции Интерфейсные ошибки Ошибки в структурах данных или внешнем доступе к базе данных Ошибки производительности Инициализация и ошибки завершения Причинно-следственные методы построения графика Причинно-следственное построение графика - метод, который обеспечивает краткое представление логических условий и соответствующих действий. Он состоит в выполнении четырех шагов: Причины (входные условия) и результаты (действия) перечислены для модуля, каждому присвоен идентификатор. Разработан причинно-следственный график. График преобразован в таблицу решений. Правила таблицы решений преобразованы в тестовые сценарии. Тестирование V-модели Тестирование V-модели - наиболее широко признанная модель для проведения тестирования, отслеживание цикла разработки и связанные с ним задачи тестирования в каждой фазе. Оно состоит из юнит-тестирования, интеграционного тестирования, тестирования системы и приемочных испытаний, которые были созданы на основе тестируемого ПО. Юнит-тестирование Юнит-тестирование включает тестирование самого маленького модуля или блока кода - юнита. Юнит программного обеспечения определен как набор сегментов кода, которые составляют модуль или функцию. Модуль может быть экранами для приложения GUI или быть самым маленьким блоком кода. Интеграционное тестирование Интеграционное тестирование тестирует приложение в целом при идентификации проблем с коммуникацией программы. Оно выполняется, чтобы протестировать интерфейс среди модулей. Обновление базы данных, а также функциональные проблемы, которые не найдены юнит-тестированием, обычно идентифицируются в интеграционном тестировании. Приемочные испытания Приемочные испытания тестируют систему в целом, чтобы гарантировать ее соответствие установленным бизнес-требованиям. Очень часто проводится непосредственно клиентом. Этот тип тестирования проверяет, работает ли система в определенных ограничениях,и гарантирует удовлетворение потребностей организации и конечного пользователя/клиента. Регрессивное тестирование Регрессивное тестирование - тестирование ПО после того, как было проведено тестирование новых фич. Это процесс тестирования системы после того, как в новую версию программы были внесены определенные изменения, и он должен гарантировать отсутствие багов в тех частях системы, в которых изменения не коснулись. Чем больше различие между версиями, тем менее эффективный регрессивный тест. Источник: http://www.c-sharpcorner.com/UploadFile/6f0898/importance-of-testing-in-developer-point-of-view/

ADO.NET разработан, чтобы помочь разработчикам эффективно работать с многоуровневыми базами данных через интернет или Интернет сценарии. Объектная модель ADO.NET состоит из двух основных компонентов: Соединенная модель (.NET Data Provider - ряд компонентов, включая Connection, Command, DataReader, и объекты DataAdapter) Отсоединенная модель (DataSet). Connection Объект Connection - первый компонент ADO.NET. Connection открывает соединение с Вашим источником данных. Все конфигурируемые аспекты соединения с базой данных представлены в объекте Connection, который включает ConnectionString и ConnectionTimeout. Объект Connection также помогает в доступе и управлении базой данных. Транзакции базы данных также зависят от объекта Connection. В ADO.NET тип Connection зависит, на какой системе баз данных Вы работаете. Часто используемые подключения в ADO.NET: SqlConnection OleDbConnection OdbcConnection Command Объект Command используется, чтобы выполнить действие с источником данных. Объект Command может выполнить команды T-SQL и хранимые процедуры. Вы можете выполнить SQL-запросы, чтобы возвратить данные в DataSet или объекты DataReader. Объект Command выполняет стандартные Select, Insert, Delete и Update T-SQL операции. DataReader DataReader построен как способ получить и изучить строки, возвращенные в ответ на ваш запрос как можно быстрее. На самом деле, в DataSet не создается более, чем одна строка информации из источника данных в памяти одновременно. Это делает DataReader эффективным при возвращении больших объемов данных. Данные, возвращаемые DataReader, всегда только для чтения. Этот класс был построен, чтобы он был однонаправленным, только для чтения способ быстрого запуска данных (это называлось «пожарный шланг» (firehose) в ADO). Однако, если Вы должны управлять схемой или использовать некоторые функции усовершенствования дисплея, такие как автоматическая разбивка на страницы, Вы должны использовать DataAdapter и DataSet. DataAdapter DataAdapter принимает результаты запроса базы данных от объекта Command и продвигает их в DataSet, используя метод DataAdapter.Fill(). Кроме того, метод DataAdapter.Update() согласует любые изменения в DataSet и возвращает к первоначальному источнику данных. DataAdapter объект работает в подсоединяемой модели. DataAdapter выполняет пять   следующих шагов: Создание/откройте соединений Выбор данных в соответствии с указанной командой Создание XML-файла данных Заполнение данных в DataSet. Тесное соединение. Command Builder Используется для того, чтобы сохранить изменения, внесенные в кэш-память данных по backend. Работа Command Builder должна генерировать Command согласно изменениям в DataRows. Разработчик команды генерирует команду на основе состояния строки. Есть пять состояний строки: Unchanged (Без изменений) Added (Добавленный) Deleted (Удаленный) Modified (Измененный) Detached (Отдельный) Command Builder работает на добавление, удаление и изменение строки состояния. Detached (Отдельный) используется, когда объект не создается из строки состояния. Transaction Объект Transaction используется, чтобы выполнить транзакцию backend. У класса Connection есть метод BeginTransaction, который может использоваться, чтобы создать Transaction. Определенная успешная практика должна гарантировать, что Transaction размещен в Using statements для быстрой очистки, если они не фиксируются. Иначе объекты (и любые внутренние блокировки, которые могут быть необходимы) останутся активными, пока GC не найдет время для его очистки. Parameters Объект Parameter используется, чтобы решить проблему SQL Injection attack при контакте с пользователем входных параметров. Объект Parameter позволяет передачу параметров в объект Command, класс Parameter позволяет Вам быстро помещать параметры в запрос без конкатенации строк. Источник: http://www.c-sharpcorner.com/UploadFile/puranindia/ado-net-objects-part-i/

Введение Все мы уже знаем (ну или что-то слышали об) основных правила применения элементов разметки HTML5. Появилось много "плюшек" и “вкусностей” в новой спецификации HTML. Вместе с тем, появились новые элементы разметки. Но не все помнят/знают, как их использовать правильно. Коротко остановлюсь на главных нововведениях HTML5: Новые элементы: header, footer, section, article, video, audio, progress, nav, meter, time, aside, canvas; Новые значения для атрибута type тега ; Новые атрибуты HTML5 для элементов, такие как: dragable, contenteditable, hidden, contextmenu, data-*, dropzone, role, spellcheck[8] и т.д.; Атрибуты class, dir, id, lang, style, tabindex, title, существовавшие в HTML4, теперь можно применять ко всем елементам HTML разметки; Устаревшие элементы HTML страницы, которые частично поддерживаются и не рекомендуются к ипользованию: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt, u. Итак,  более детально рассмотрим, как же правильно использовать основные новые теги. Элемент Элемент <main>содержит главную информацию вашего сайта. Такие повторяющиеся элементы как логотип, окно поиска, меню навигации не рекомендуется вкладывать в <main>. Также не стоит помещать сам элемент <main> внутрь элементов <article>, <aside>, <header>, <footer> или <nav>. Элемент В элемент <article> следует помещать тот контент, который может быть удален без ущерба для всего сайта. К примеру, краткое описание новостей, рекламный баннер, статья, комментарии. Можно вкладывать <article> в <article>, что будет связывать вложенные элементы <article> с родительским. Элемент Элемент <header>, как  понятно из названия, используется для оглавления отдельного контента или всей страницы. Должен содержать  заглавие, дату статьи и т.д. Элемент Элемент <footer> служит для предоставления информации об авторе статьи/страницы, ссылки на авторские права и т.д. Обычно является прямым потоком тега <body> (помещается сразу за элемент <body>). Элемент Этот элемент содержит информацию об окружающем контенте, дополнительную информацию пользователю. Может содержать такой элемент, как <nav>, сноски, ссылки и т.д. Элемент   Предназначен для предоставления контактной информации о статье или всей странице. Стоит отметить, что этот элемент часто помещают в , для размещения ссылок для связи с авторами страницы. Элемент Элемент <nsfw> (англ. - Not Safe For Work – небезопасно для отработки) используется для размещения на странице контента сомнительного характера. Часто этот тег используют для размещения порнографии. Чтобы браузер не отображал такой контент, используют CSS код  nsfw {display: none ;} Элемент Элемент предназначен для размещения видео контента на странице. Для корректного отображения контента стоит прописать дополнительно атрибуты width, height, src, controls. Ваш код будет выглядеть примерно так:   <video width="840" height="480" src="../video/myVideo.mp4" controls> video>   Если же Вы хотите разместить у себя на странице видео, которое расположено на сайте youtube.com. Вам стоит зайти на страницу c видео, правой кнопкой мыши нажать на видео, и из выпадающего меню выбрать “Получить код для встраивания”. Копировать код из “попап” окошка. В разметке вашего сайта, в нужном вам месте, кликнуть правой кнопкой мыши и выбрать “Вставить”. У вас получится примерно такой код:   <iframe width="854" height="510" src="https://www.youtube.com/embed/_giinWWrNlQ" frameborder="0" allowfullscreen>iframe>   В свою очередь, элемент > создает область, которая позволяет загружать любой документ в себя. Элемент Элемент <audio> позволяет добавить на страницу аудио дорожки. Также в HTML5: Реализована возможность добавления на станицу геолокационных карт, а также определения местоположения пользователя в данный момент. Теперь мы можем рисовать с помощью технологии canvas. А также использовать 3D графику. Стало возможным просто перетягивать документы и прикреплять к письму. И еще много новых "плюшек", которые вы можете узнать и научиться их использовать, пройдя наши курсы в учебном центре CyberBionic Systematics. Всем удачи и хорошего кода)

Введение В современном JavaScript приложении встречается много задач, которые выполняются асинхронно (обращение к серверу, анимация, работа с файловой системой, геолокация). В данной статье будут рассмотрены Promise объекты, как один из вариантов организации асинхронного кода. Асинхронное программирование в JavaScript Асинхронное программирование в JavaScript не связано с многопоточностью. JavaScript – однопоточный, это означает, что не существует стандартных языковых конструкций, которые позволят создать в приложении дополнительный поток для выполнения параллельных вычислений (единственная возможность организовать настоящую многопоточность – использовать Web Workers). Асинхронное программирование – стиль программирования, при котором результат работы функций доступен не сразу, а через некоторое время. Асинхронная функция – это функция, после вызова которой JavaScript приложение продолжает работать, потому что функция сразу выполняет возврат. Результат работы асинхронной функции становится известным позже, и для того, чтобы оповестить наше приложении о полученных значениях, асинхронная функция вызывает другую функцию (callback), которую мы передаем в аргументах при запуске. Например, getDataFromServer(onSuccess); getDataFromServer – асинхронная функция, выполняющая запрос на сервер, onSuccess – callback функция или функция обратного вызова, которая запускается при успешном завершении операции обращения к серверу. Использование callback функций может привести к появлению проблемы, которую называют Pyramid of Doom – callback функция, в которой вызывается асинхронная функция, которой передается callback функция, и в ней же вызывается асинхронная функция и т.д. step1(function(result1) {        step2(function(result2) {              step3(function(result3) {                     // и т.д.              });        }); }); Такой код тяжело читать и сопровождать. Для того, чтобы подобных проблем не было , мы можем использовать различные шаблоны для организации кода. Один из таких шаблонов - Promise. (Другие варианты организации асинхронного кода можно посмотреть в этой статье) Что такое Promise (ECMAScript 6) Promise – прокси объект, который представляет еще не известное значение (значение будет доступно после завершения асинхронной операции). С Promise можно ассоциировать две функции: первая - для выполнения операции, если асинхронная задача завершилась успешно. И вторая - для операции в случае ошибки. Promise может находиться в одном из трех состояний: pending; fulfilled; rejected. Например, мы выполняем AJAX запрос с помощью асинхронной функции, которая возвращает Promise. Как только мы выполним запрос, функция создаст Promise, который будет в состоянии pending. Когда сервер вернет ответ, Promise перейдет в состояние fulfilled, если ответ был 200 OK, или в состояние rejected, если статус код был 500 Internal Server Error (или другой код ошибки). При переходе в fullfiled состояние Promise будет содержать ответ от сервера, при переходе в rejected – ошибку или текст ошибки (все зависит от реализации асинхронной функции). Как только Promise меняет свое состояние, запускается функция, которая была зарегистрирована как реакция на соответствующее состояние. Пример использования асинхронной функции download, которая возвращает Promise: download("data.txt").then(function (data) {     console.log(data); }, function (error) {     console.error(error); }); или такая запись var p = download("data.txt"); p.then(onFulfilled, onRejected); function onFulfilled(data) {     console.log(data); } function onRejected(error) {     console.error(error); } Для того, чтобы установить, что произойдет после завершения асинхронной операции, на объекте Promise необходимо вызвать метод then. Этот метод принимает два аргумента: обработчик для состояния fulfilled обработчик для состояния rejected Функцию then можно вызвать в любой момент, даже если асинхронная операция уже завершена и Promise перешел из состояния pending. Если вызвать then на Promise, который уже находится в конкретном состоянии, то будет вызвана соответствующая состоянию функция, переданная в метод then. Ниже приведен код асинхронной функции download. function download(url) {     // Создание нового объекта Promise     return new Promise(function (resolve, reject) {         var req = new XMLHttpRequest();         req.open('GET', url);         req.onload = function () {             if (req.status == 200) {                 // перевод Promise в состояние fulfilled.                 // req.response - данные доступные в функции-обработчике                 // перехода состояния                 resolve(req.response);             }             else {                 // перевод Promise в состояние rejected                 reject(Error(req.statusText));             }         };         // Обработка сетевых ошибок         req.onerror = function () {             // перевод Promise в состояние rejected             reject(Error("Network Error"));         };         // отправка запроса на сервер         req.send();     }); } Поддержка Promise браузерами http://caniuse.com/#search=Promise Библиотеки для работы с Promise Есть много различных библиотек, которые реализуют спецификацию объекта Promise. Поэтому проблему слабой поддержки Promise ECMAScript 6 можно решить, применив одну из следующих библиотек: jQuery http://jquery.com/ Q https://github.com/kriskowal/q When https://github.com/cujojs/when WinJs http://msdn.microsoft.com/en-us/library/windows/apps/br211867.aspx RSVP.js https://github.com/tildeio/rsvp.js

Введение При разработке компьютерных систем и программ, в том числе таких, в которых функционирует множество оригинальных сущностей и их дублей – экземпляров, возникает проблема отслеживания связей взаимодействия между этими объектами. И чем больше появляется этих объектов , тем сложнее вписать их в структуру приложения. Да, можно сказать что здесь явные проблемы с архитектурой и так не должно быть, но все равно мы наталкиваемся на проблему создания крупной многообъектной системы с гибкими динамическими связями и адаптивным поведением. Лучшее решение – событийно-ориентированное программирование! Итак, событие – это внезапное происшествие, появление которого нельзя предугадать, а можно только к нему готовиться. В подобном русле работает и человеческих мозг. Он ожидает появления события и, когда оно происходит, как-то на него реагирует. Давайте рассмотрим небольшой мысленный эксперимент. Представьте дорогу, пешеходный переход и светофор, который регулирует переход в данном месте. Светофор – это объект, который порождает событие. Он по воле своего внутреннего устройства будет включать или отключать зеленый свет, который будет разрешать пешеходам переход через улицу. В это время на тротуаре начинают собираться люди. Каждый человек – это объект, содержащий специфическое поведение, которое называется обработчиком события. В данном случае этот обработчик будет отвечать за пересечение улицы и будет вызываться во время возникновения события. У каждого человека обработчик разный, ведь все люди переходят через улицу по-разному. Один будет идти быстро, другой медленно, третий - смотреть на машины, которые стоят на перекрестке, а четвертый - следить за таймером, который будет отсчитывать секунды. Но каждый из них не предполагает, когда конкретно произойдет это событие, потому все они ждут на тротуаре. Когда человек подходит к переходу, он подписывает свой обработчик события перехода дороги на конкретное событие этого светофора. Если человек передумает переходить или, например, отойдет поговорить по телефону, то он не будет выполнять свой обработчик, если событие возникнет. И, наконец, когда светофор включается на зеленый, все люди начинают переходить дорогу. Возникло событие – выполнился обработчик. Что-же нам позволяет сделать событийную модель? Она разрешает динамически изменять связи между объектами и не только расторгать или устанавливать их, но и менять характер самого действия. Давайте рассмотрим пример создания события на языке C#. namespace TrafficLight {     // Светофор     public class Light     {         // Событие появления зеленого света         public event EventHandler Green;         // Метод который вызывает событие         public void SwichToGreen()         {             Green.Invoke(this, new EventArgs());         }     }     // Человек     public class Human     {         public string Name { get; private set; }         public Human(string name)         {             Name = name;         }         // Метод обработчик события перехода через дорогу         public void CrossingTheRoad(object sender, EventArgs e)         {             Console.WriteLine(this.Name + " crossing!");         }     }     class Program     {         static void Main(string[] args)         {             // Создание светофора             Light light = new Light();             // Создание людей             Human human1 = new Human("Alex");             Human human2 = new Human("Bob");             Human human3 = new Human("Alice");             // Подписка на событие             light.Green += human1.CrossingTheRoad;             light.Green += human2.CrossingTheRoad;             light.Green += human3.CrossingTheRoad;             // Вызов события             light.SwichToGreen();             Console.ReadKey();         }     } } Таким образом, язык C# позволяет быстро и легко создавать приложения, которые используют событийную модель. Более подробно узнать о событиях Вы можете в двенадцатом уроке курса C# Базовый. Для практики можете создать небольшую игру с игровыми объектами, взаимодействующими посредством событий.