Введение ASP.Net Web API – это основа создания HTTP услуг широкого спектра клиентов, таких как браузеры, мобильные телефоны, планшеты и так далее. API должна быть совместима с современными браузерами, чтобы использовать эти услуги в простой форме. Мы можем быстро и просто сбрасывать служебные данные в браузер, а также приложения. Необходимость в Web API Если Вы нуждаетесь в Web Service и Вам не нужно SOAP, то API ASP.Net –лучший выбор. Он строит простые HTTP сервисы, основанные на базе существующей WCF. ASP.Net Web API на основе HTTP легко определяются. У них открытый исходный код. Легкая архитектура подходит для устройств с ограниченной шириной полосы, например, смартфонов. Создание простой Web API в ASP. NET MVC 6 Запустите Visual Studio 2015 Preview. В меню Файл выберите New > Project. В диалоговом окне New Project нажмите Tempates > Visual C# > Web и выберите ASP. NET шаблон проекта Web-приложений. Назовите проект "WebApplication1" и нажмите OK. В диалоговом окне New ASP.NET Project выберите "ASP.NET 5.0 Empty” шаблон. Проект включает в себя следующие файлы:   Global.json содержит настройки решения. В project.json находятся настройки проекта. Project_Readme.html – read me файл. Startup.cs содержит встроенный код конфигурации. Откройте файл Project.json. Добавьте библиотеки классов (class libraries) в разделе зависимостей (dependencies). ​ "dependencies": {           "Microsoft.AspNet.Server.IIS": "1.0.0-beta1",           " "Microfost.AspNet.Diagnostics": "1.0.0-beta1" } Затем откройте Startup.cs с кодом, показанным ниже.  public class Startup    {         public void Configure(IApplicationBuilder app)         {             // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=398940              app.UseWelcomePage();             // app.UseMvc();          }     }  После отладки Visual Studio перейдите на http://localhost:port/ в браузере. Создание Web API Мы создадим Web API, чтобы упорядочить список клиентских продуктов. Сначала нужно добавить ASP.Net MVC6 в приложение. Добавьте пакет MVC6 в список зависимостей в Project.json. Используйте код ниже. "dependencies": {         "Microsoft.AspNet.Server.IIS": "1.0.0-beta1",         "Microsoft.AspNet.Diagnostics": "1.0.0-beta1",         "Microsoft.AspNet.Mvc": "6.0.0-beta1"       } Затем добавьте MVC в request pipeline в Startup.cs. Добавьте Using для Microsoft.Framework.DependencyInjection.   Добавьте следующий метод в Startup класс. using System; using Microsoft.AspNet.Builder; using Microsoft.AspNet.Http; using Microsoft.Framework.DependencyInjection;//add new  namespace WebApplication1 {     public class Startup     {         public void Configure(IApplicationBuilder app)         {                      app.UseWelcomePage();              app.UseMvc();         }         public void ConfigureServices(IServiceCollection services)         {             services.AddMvc();         }     } } Добавьте модель using System; using System.ComponentModel.DataAnnotations; namespace WebApplication1.Model {     public class Customer     {         public int CustomerId { get; set; }         [Required]         public string Name { get; set; }     } } Добавьте контроллер  using Microsoft.AspNet.Mvc; using System.Collections.Generic; using System.Linq; using WebApplication1.Model; namespace WebApplication1.Controllers {     public class HomeController : Controller     {                 static readonly new List<Customer> _items = new List<Customer>()             {                 new Customer  { CustomerId = 1, Name = "Henry" },                 new Customer { CustomerId = 2, Name = "John" },             };         public IEnumerable<Customer> Get()         {             return _items;         }         public IActionResult GetById(int id)         {             var its = _items.FirstOrDefault(x => x.CustomerId == id);             if (its == null)             {                 return HttpNotFound();             }             return new ObjectResult(its);         }         public void CreateCustomer([FromBody] Customer item)         {             if (!ModelState.IsValid)             {                 Context.Response.StatusCode = 400;             }             else             {                 item.CustomerId = 1 + _items.Max(x => (int?)x.CustomerId) ?? 0;                 _items.Add(item);                 string url = Url.RouteUrl("GetByIdRoute", new { id = item.CustomerId },                     Request.Scheme, Request.Host.ToUriComponent());                 Context.Response.StatusCode = 201;                 Context.Response.Headers["Location"] = url;             }         }         public IActionResult DeleteItem(int id)         {             var item = _items.FirstOrDefault(x => x.CustomerId == id);             if (item == null)             {                 return HttpNotFound();             }             _items.Remove(item);             return new HttpStatusCodeResult(204);         }     } } Выше описывается класс HomeController. Маршрутизация Атрибут маршрутизации определяет URL шаблоны контроллера. [Route("api/[controller]")] Методы HTTP [HttpGet], [HttpPost] и [HttpDelete] – атрибуты, определяющие методы HTTP для контроллера. public IEnumerable<Сustomer> Get() { }  //[HttpGet]  public IActionResult GetById(int id) { } //[HttpGetbyid}  public void СreateСustomer([FromBody] Сustomer item) { } // [HttpPost]  public IActionResult DeleteItem(int id) { } //[HttpDelete] {Customerid: int} int ограничивает переменную до соответствия целому числу, чтобы URL-адреса совпадали. http://localhost/api/home/1 http://localhost/api/home/42 Из этой статьи Вы узнали, как создавать Web API в MVC 6, используя модели, контроллер и HTTP методы. Источник: http://www.c-sharpcorner.com/UploadFile/85ed7a/create-web-api-in-mvc-6/

Введение Данная статья будет полезной для новичков в мире Web-разработки, поскольку в ней будут рассмотрены основные сценарии использования свойства position. Под позиционированием подразумевают расположение элемента в заданной системе координат. Можно выделить четыре типа позиционирования: нормальное, абсолютное, относительное и фиксированное. В зависимости от выбранного типа, установленного через свойство position, будет изменяться и система координат. Вместе со свойством position целесообразно использовать следующую комбинацию свойств (или лишь несколько из них): left, top, right, bottom и z-index, с их помощью элемент можно позиционировать более точно и в определенных случаях абсолютно независимо от соседних элементов. Свойства left, top, right, bottom отвечают за перемещение элемента от его первоначального положения в четырех направлениях: вправо, вниз, влево, вверх соответственно. Свойство z-index отвечает за перемещение элемента на другую плоскость (или уровень) и может принимать значения из диапазона от 1 до N. Наиболее часто свойство position используется для определения взаимного расположения слоев, далее рассмотрим особенности разных типов позиционирования. Нормальное позиционирование По умолчанию, если для элемента не задано свойство position или ему задано значение static, слои позиционируются друг за другом, при этом каждый следующий начинается с новой строки. Причем, слои размещаются максимально близко к верхнему левому углу страницы и без отступов между границами. Кроме этого, свойства left, top, right, bottom и их значения, если таковы определены, игнорируются браузером. Можем убедиться в этом, отобразив два примера кода в браузере: Без использования свойства position. <html> <head>     <title>Positiontitle>     <style type="text/css">         div {             width: 240px;             height: 80px;         }     style> head> <body>     <div style="background-color: Yellow">div>     <div style="background-color: Red">div>     <div style="background-color: Green">div> body> html> С использованием свойств position:static, top и left:  <html>                          <head>     <title>Positiontitle>     <style type="text/css">         div {             width: 240px;             height: 80px;         }     style> head> <body>     <div style="background-color: Yellow">div>     <div style="background-color: Red; position:static; top:50px; left: 100px">div>     <div style="background-color: Green">div> body> html> В итоге получим одинаковое отображение нашего кода в браузере:  Абсолютное позиционирование При задании абсолютного позиционирования элемента, он «отделяется» от потока документа и перестает в нем существовать. Его местоположение, равно как и координаты, задается относительно краёв окна браузера, в так называемой «видимой области». Задается такой тип через значение absolute свойства position. Стоит отметить следующие особенности данного типа позиционирования: - свойства top и left имеют более высокий приоритет, нежели right и bottom, это означает, что при противоречии свойств left и right значение right будет игнорироваться, также браузер поведет себя относительно свойства bottom. - при использовании абсолютного позиционирования и задании значений свойствам left, top, right, bottom и z-index изначальное местоположение слоя становится доступным для замещения другими соседними элементами. div {    background-color:red;    width: 120px;    height: 240px;    position: absolute; /*Определяем абсолютное позиционирование элемента*/    top: 100px;  /*Производим смещение на 100px вниз от изначального местоположения слоя*/    left: 150px; /*Производим смещение на 100px вправо от изначального местоположения слоя*/    bottom: 20px; /*Свойства bottom и right в данном случае будут игнорироваться*/    right: 40px; } С использованием свойств position:absolute, top и left:  <head>     <title>Positiontitle>     <style type="text/css">         div {             width: 240px;             height: 240px;             position: absolute;         }         #redBox {             background-color: red;             top: 10px;             left: 10px;         }         #greenBox {             background-color: green;             top: 70px;             left: 70px;         }         #blueBox {             background-color: blue;             top: 130px;             left: 130px;         }     style> head> <body>     <div id="redBox">div>     <div id="greenBox">div>     <div id="blueBox">div> body> html> В итоге, получим следующее отображение разметки в браузере:  Используя для зеленого слоя свойство z-index и передав ему значение 3, сможем добиться следующего отображения: #greenBox {             background-color: green;             top: 70px;             left: 70px;             z-index: 3;         } Фиксированное положение  Если свойству position задать значение fixed, элемент будет привязан к определенной свойствами left, top, right, bottom точке на экране и не будет изменять своего положения при прокрутке веб-страницы. Следующей отличительной чертой от absolute будет то, что при размещении фиксированного элемента за пределами области видимости снизу или справа от нее не приводит к возникновению полос прокрутки. Целесообразным применением данного типа позиционирования является создание меню, заголовков, неподвижных элементов, содержащих формы быстрой связи со службой поддержки (online chat).  С использованием свойств position:fixed, top и left: <html> <head>                                                  <title>Fixedtitle>     <style type="text/css">         div {             width: 240px;             height: 240px;         }         #redBox {             background-color: red;         }         #greenBox {             background-color: green;         }         #blueBox {             background-color: blue;         }         #fixedBox {             background-color: cyan;             width: 200px;             height: 200px;             border-radius: 100px;             position: fixed;             top: 20px;             left: 150px;             opacity: 1.0;         }     style> head> <body>     <div id="redBox">div>     <div id="greenBox">div>     <div id="blueBox">div>     <div id="fixedBox">div> body> html> Относительное позиционирование В случае задания свойству position значения relative позиционирование элемента будет установлено относительно его места по умолчанию. Использование свойств left, top, right, bottom позволит изменять позицию элемента и сдвигать его в ту или иную сторону от его изначального местоположения. При задании свойствам положительного значения, к примеру, left: 70px, происходит смещение элемента вправо от левой границы родительского элемента, при задании отрицательного значения left: -70px, происходит сдвиг влево. Аналогично выполняются инструкции и для других свойств. Стоит отметить, что данный тип позиционирования нельзя применять к элементам таблиц (ячейкам, строкам, колонкам и т.д.). Кроме этого, место, занимаемое элементом до его перемещения, остается пустым и не может быть занятым другими элементами. С использованием свойств position:relative, top и left: <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title>Relativetitle>     <style type="text/css">         div {             width: 640px;             height: 240px;             position: relative;         }         #redBox {             background-color: red;             top: 10px;             left: 10px;         }         #greenBox {             background-color: green;             top: 70px;             left: 70px;         }         #blueBox {             background-color: blue;             top: 130px;             left: 130px;         }         style> head> <body>     <div id="redBox">div>     <div id="greenBox">div>     <div id="blueBox">div> body> html> Зачастую относительное и абсолютное позиционирование сами по себе не применяются, поскольку существует свойство margin, с очень похожим функционалом, позволяющий задать местоположения слоя относительно его соседей. Но сочетание разных типов позиционирования для вложенных слоев, делает их незаменимыми при необходимости изменить систему координат и задать размещения дочерних элементов относительно их родителя, избежав трудно-воспринимаемых конструкций из множества вложенных слоев.

Введение Переадресация – когда веб-страница побывала на определенном URL, а потом меняет его на другой URL. Если пользователь посетил "website.com/page-a" и произошло перенаправление на "website.com/page-b". Переадресация пригодится Вам, если Вы хотите перенаправить страницу на новое место, изменить URL-структуру сайта, удалить "WWW" из URL или даже полностью перенаправить страницу на другой сайт. К примеру, Вы только что перешли на новый сайт и хотите закрыть старый. Но Вам не нужно, чтобы страницы старого сайта имели статус 404 Not Found. Старые ссылки должны перенаправлять пользователя на Ваш новый сайт. Пример: мы хотим old-website.com/blog/post перенаправить на new-website.com/blog/post, а также мы хотим перенаправить все другие страницы, использующие данный URL. Также необходимо, чтобы поисковые системы понимали, что эти изменения постоянны и обновлялись соответственно. Как же это сделать? Для начала нужно узнать немного про HTTP. Коды ответов HTTP Каждый раз, когда Вы заходите на URL или отправляете запрос из браузера, используется протокол передачи гипертекста (HTTP).  Это процесс, посредством которого мы запрашиваем данные, как CSS, HTML и изображения, хранящиеся на сервере. После того, как послан запрос, эти данные отвечают кодом HTTP 200 OK, означающий, что они доступны. Есть много различных видов кода ответа, самый известный – 404 Not Found; веб-страницы, а также любой другой запрашиваемый контент, например, изображения могут отвечают статусом 404. Каждый HTTP ответ имеет определенный трехзначный номер, 404 Not Found – статусный код 4XX, указывающий ошибку клиента; 200 относится к категории 2XX и показывает, что сообщение успешно. Нас интересуют ответы HTTP-категории 3ХХ, как 301 Moved Permanently или 302 Found. Эти коды статуса специально отведены для переадресации.  В нашем случае используется перенаправление 301, потому что определенные веб-браузеры или прокси-серверы кэшируют этот тип перенаправлений и делают старую страницу недоступной. HTML перенаправления Один из самых простых способов перенаправления – мета-тег refresh. Можно разместить этот мета-тег внутри тега  в верхней части страницы HTML: <meta http-equiv=”refresh” content=”0”; url=’http://new-website.com’ /> Атрибут content – атрибут задержки перед перенаправлением браузера на новую страницу, он установлен на 0 секунд. Не нужно устанавливать код состояния HTTP, но важно перепроверить написание кавычек выше (есть вложенные кавычки, поэтому лучше использовать разные типы кавычек). Хотя этот метод самый простой для перенаправления веб-страницы,  у него есть недостатки. В соответствии с W3C некоторые браузеры не воспринимают мета-тег refresh. Пользователи могут увидеть страницу А, которая загрузится раньше, чем Вы будете перенаправлены на страницу В. Также она отключает кнопку назад на старых браузерах. Поэтому этот метод не рекомендуется использовать вообще. Лучший вариант – перенаправление сайта с JavaScript. Перенаправления JavaScript Перенаправить на другой URL с JavaScript довольно легко, просто требуется изменить location window-объекта: window.location = “http://new-website.com”;  В JavaScript есть много возможностей для этого: window.location = “http://new-website.com”; window.location.href = “http://new-website.com”; window.location.assign(“http://new-website.com”); window.location.replace(“http://new-website.com”); Также можно просто использовать location с нужным объектом окна. И self или top. С location объекта можно также перезагрузить страницу или изменить путь и начало URL. Здесь присутствует несколько проблем: JavaScript должен быть включен и загружен. Пока не ясно, как поисковые системы реагируют на это. Нет кодов состояния, поэтому Вы не можете полагаться на информацию о перенаправлении. Требуется решение на сервере, чтобы помочь нам, отправив ответ 301 в поисковые системы и браузеры. Перенаправления Apache Возможно, самый удобный способ перенаправления – добавление определенных правил в файл `.htaccess` на веб-сервере Apache.  `.htaccess` – документ, дающий нам возможность отдавать команды Apache, программному обеспечению, работающему на сервере. Чтобы перенаправить пользователей, нужно создать новый (или отредактировать существующий) файл .htaccess  и добавить его в корневой каталог старого сайта. Мы будем добавлять данное правило: Redirect 301 / http://www.new-website.com Любая страница, открытая на старом сайте, перенаправляется на новую. Как Вы видите, мы ставим код ответа прямо перед правилом переадресации. Этот вид переадресации работает только на серверах Linux с включенным mod_rewrite, модулем Apache, позволяющим нам перенаправить запрашиваемые URL-адреса на сервере, если определенный образец найден, он будет изменять запрос некоторым способом. Большинство хостинг-компаний поддерживают это по умолчанию.  Вернемся к нашему примеру, если использовать код, приведенный выше, то пользователь перейдет к "old-website.com/blog/post" и будет перенаправлен по адресу "new-website.com". Неудобно то, что пользователи не видят реальную запрашиваемую страницу. Поэтому добавим следующее правило для нашего `.htaccess` файла, чтобы перенаправить все сообщения блога на нужную страницу: RedirectMatch 301 /blog(.*) http://www.new-website.com$1 Если необходимо перенаправить отдельные страницы по определенному адресу, можно добавить правила, например, так: Redirect 301 /page.html http://www.old-website/new-page.html По ошибке пользователи могут быть перенаправлены на страницу 404:  <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule .* 404.html [L] </IfModule> Сначала нужно проверить, доступен ли модуль mod_rewrite и включить его. В случае, когда файл или каталог не найден, пользователь попадет на нашу страницу 404. Он увидит содержимое страницы 404.html файла в то время, как запрашиваемый URL останется тем же. Перенаправления Nginx Для серверов, работающих на Nginx, в `nginx.conf` файл нужно добавить блок для обработки перенаправления запросов: server {     listen 80;     server_name old-website.com;     return 301 $scheme://new-website.com$request_url; } LightTPD перенаправления Для серверов, которые работают под управлением веб-сервера Lighttpd, можно сделать перенаправление, импортируя mod_redirect модуль и используя url.redirect: server.modules = ( “mod_redirect” ) $HTTP[“host’]=~”^(www\.)?old-website.com$”{     url.redirect = (     “^/(.*)$” => “http://www.new-website.com/$1”,     ) } PHP перенаправления В PHP можно использовать функцию header: header(‘Location: http://new-website.com’);     exit; ?> Это должно быть установлено перед любой разметкой и контентом другого рода, однако есть одна небольшая сложность. Функция по умолчанию отправляет ответ 302, сообщая о том, что контент был временно перемещен. В нашем случае нужно постоянно перемещать файлы на новый сайт, так что стоит заменить перенаправление 302 на 301: header(‘Location: http://www.new-website.com/’, true, 301);     exit(); ?> Параметр true заменит ранее установленный header и 301 изменяет код ответа на правильный. Ruby on Rails переадресации Из любого контроллера Rails проекта мы можем быстро перенаправить на новый сайт с redirect_to. Параметру :status нужно установить значение : moved_permanently. Так переопределяется код статуса по умолчанию 302 и изменяется на Moved Permanently: class WelcomeController def index redirect_to ‘http://new-website.com’, :status => :moved_permanently     end end В Rails 4 можно добавить redirect в routes.rb файл, автоматически отправляющий ответ 301: get “/blog” => redirect(“http://new-website.com”) Если нужно перенаправить все статьи на новый сайт, можно сделать так:  get “/blog/:post” => redirect(“http://new-website.com/blog/%{post}”) Node.js перенаправления Чтобы перенаправить с помощью Node, во-первых, нужно включить HTTP модуль и создать новый сервер, используя .writeHead () метод: var http = require(“http”); http.createServer(function(req, res) {     res.writeHead(301,{Location: ‘http://new-website.com’});     res.end(); }).listen(8888); Если Вы делаете новый файл и называете его index.js, вставьте код, приведенный выше, и запустите node index.js, в командной строке вы найдете локальную версию сайта, перенаправленную на new-website.com. Но, чтобы перенаправить все сообщения в разделе /blog, нужно разобрать URL из запроса с удобным Node URL модулем: var http = require(“http”); var url = require(“url”); http.createServer(function(req, res) {     var pathname = url.parse(req.url).pathname;     res.writeHead(301,{Location: ‘http://new-website.com/’ + pathname});     res.end(); }).listen(8888); Используя функцию .writeHead (), мы можем установит путь от запроса до конца URL строки. Теперь пользователь будет перенаправлен на тот же путь на новом сайте. Flask перенаправления С Flask framework поверх Python мы можем создать маршрут, указывающий на подстраницы с функцией redirect, но в конце должна быть опция 301, так как по умолчанию установлена 302: @app.route(‘/notes/<page>’) def thing(page): return redirect(“http://www.new-website.com/blog/” + page, code=301)

Введение Вам приходилось возвращаться к фрагменту кода, написанному год или месяц назад? Каково это было?  Это было просто, или приходилось вникать в код исходя из заметок? Если у Вас не получается быстро разобраться в коде и Вы задаете себе вопрос: «Что же я тогда имел ввиду?» – Вы определенно делаете что-то не так. Скорее всего, Ваш код работает правильно. И Вы знали его вдоль и поперек, когда над ним работали. Почему же Вы не можете его вспомнить сейчас? Быть может, он не был написан достаточно доступно и не соответствовал стандартам машинного кода? В этой статье Вы найдете полезную информацию о том, как научиться писать доступный не только для себя, но и для остальных разработчиков код. Пример использования стандарта оформления кода Рассмотрим это на следующем примере метода в C#: public string Transform(List<DateTime> s)         {             string d = null;             foreach (DateTime kc in s)             {                 if (kc > DateTime.Now)                 {                     d = d + kc + "\n";                 }                 else                 {                     d = d + "Delayed\n";                 }             }             return d;         } Скорее всего, Вы не можете понять, какую функцию он выполняет и как его можно использовать. Но после короткой реконструкции кода мы получим:  public string GetText(List<DateTime> arrivalTimes)         {             var stringBuilder = new StringBuilder();             foreach (DateTime arrivalTime in arrivalTimes)             {                 if (arrivalTime > DateTime.Now)                 {                     stringBuilder.AppendLine(arrivalTime.ToString());                 }                 else                 {                     stringBuilder.AppendLine("Delayed");                 }             }             return stringBuilder.ToString();         } Или если мы обратимся к оператору “?:”, мы получим:  public string GetText(List<DateTime> arrivalTimes)         {             var stringBuilder = new StringBuilder();             foreach (DateTime arrivalTime in arrivalTimes)             {                 string message = arrivalTime > DateTime.Now ? arrivalTime.ToString() : "Delayed";                 stringBuilder.AppendLine(message);             }             return stringBuilder.ToString();         } Что произошло с кодом? Некоторые изменения сделали наш код более читабельным: 1. Имя метода получило более понятное название. 2. Мы изменили названия переменных: 1. “kc” изменена на arrivalTime, 2. “s” изменена на arrivalTimes, 3. “d” изменена на stringBuilder, Это облегчит понимание того, за что отвечает каждая переменная и как она используется. 3. Скобки были стандартизированы. 4. Добавлены вкладки для читаемости, размещения и разметки в скобках. 5. Оператор “?:” был введен для того, чтобы сократить наш код до четырех строчек. 6. Добавлен класс StringBuilder, чтобы избежать конкатенации (“string” + “string”). Кто-то может возразить, что создание экземпляра StringBuilder будет замедлять метод из-за его распределения памяти. Но стоит помнить, что конкатенация струн создает много мусора в памяти, который вынужден чистить Garbage Collector. Считается, что ~ 5 непрерывных строк равны созданию реализации StringBuilder, так что если список состоит из пяти или более элементов, то производительность этого метода будет увеличена. А для больших коллекций этот метод будет работать в несколько раз быстрее. Правильный способ составления кода Давайте перейдем к другому примеру. Рассмотрим класс пользователя: public class User         {             public bool HasConfirmedEmail { get; set; }             public bool HasActiveAccount { get; set; }             public bool IsLoggedIn { get; set; }             public bool HasPremiumAccount { get; set; }             public bool StatusAutoGenerated { get; set; }             public DateTime LastStatusChange { get; set; }             public bool SetStatus(string status)             {                 // write to Data Base                 return true;             }         }  Метод, отвечающий за обновление статуса пользователя, который должен проверить, все ли свойства в правильном состоянии: public string UpdateStatus(string status, User user)         {             if (user.HasActiveAccount)             {                 if (user.HasConfirmedEmail)                 {                     if (user.IsLoggedIn)                     {                         if (user.HasPremiumAccount)                         {                             if (!user.StatusAutoGenerated)                             {                                 if (user.LastStatusChange < DateTime.Now.AddDays(-1))                                 {                                     if (user.SetStatus(status))                                     {                                         return "Updated";                                     }                                 }                             }                         }                     }                 }             }             return "Fail";         } Хотя этот код более понятный, чем первый, представленный в этой статье, он все еще не соответствует стандартам программного кода. Вот пример того, как этот код можно сделать немного лучше: const string OK = "Updated";         const string FAIL = "Fail";         public string UpdateStatus(string status, User user)         {             if (!CanUpdateStatus(user)) return FAIL;             if (!user.SetStatus(status)) return FAIL;             return OK;         }         public static bool CanUpdateStatus(User user)         {             if (!user.IsLoggedIn) return false;             if (!user.HasActiveAccount) return false;             if (!user.HasConfirmedEmail) return false;             if (!user.HasPremiumAccount) return false;             if (user.StatusAutoGenerated) return false;             if (!(user.LastStatusChange < DateTime.Now.AddDays(-1))) return false;             return true;         } Основные изменения, внесенные в этот код, чтобы улучшить его читабельность: Static method был создан, чтобы проверить возможность обновления статуса пользователя. Это делает метод UpdateStatus более понятным с первого взгляда. Кроме того, логика метода CanUpdateStatus может быть повторно использована в других частях системы, если они являются public и static. Все " if " были заменены, чтобы уменьшить вложения. Количество скобок значительно уменьшилось, и код гораздо легче читать и компилировать. Еще одним преимуществом данного условия является его масштабируемость. Представьте себе, что класс User имеет теперь еще три свойства, которые должны быть проверены перед обновлением статуса – будут необходимы еще три "if" выписки. Теперь Вы можете добавить только три (не более) линии в методе CanUpdatedStatus. Строки, которые представляют сообщения, были удалены из тела методов и были введены в постоянные переменные. Это помогает поддерживать код, потому что независимо от числа использований кода есть только одно место, где Вы должны изменить содержание сообщения, если это необходимо. Но, на самом деле, все тексты должны быть помещены в проект внешних ресурсов. Источник: http://blog.goyello.com/2014/12/11/clean-code/ 

Беседу с Александром Шевчуком вел Назар Рудь Введение В наше время все более и более популярными становятся профессии в сфере IT. В первую очередь, это связано с высоким технологическим развитием и, соответственно, спросом на таких специалистов. В нашей статье мы хотим рассказать Вам о том, как начать карьеру в IT тем, кто раньше не был связан с этой сферой. На интересующие читателей вопросы ответил сертифицированный специалист Microsoft (MCTP, MCPD, MCT), тренер-консультант, эксперт в области построения архитектуры информационных систем, бизнес-анализа и управления ИТ проектами Александр Шевчук. В каком возрасте можно начинать карьеру в IT? Возраст начала карьеры зависит от спроса. В нашей стране спрос на аутсорс-специалистов есть.  Но стоит учитывать, что 60-70 % аутсорсинговых компаний требуют высшее специализированое образование. Но 30-40 % смотрят на компетенции специалиста, его готовность постоянно обучаться, а не на диплом. Можно начать учиться в любом возрасте, но будьте готовы, что Вам придётся потратить полгода-год на освоение базы необходимых для работы технологий. Люди в возрасте больше сорока, которые не имеют опыта в информационных технологиях и не знают методологий разработки, даже после того, как изучат все необходимые, вынуждены будут начинать с младшего специалиста в команде. Младший специалист – как юнга на корабле. У человека в возрасте это однозначно вызовет ряд переживаний и определенный дискомфорт. Это и может стать для кого-то непреодолимым барьером для начала карьеры в IT. Этот сложный период нужно просто пережить. Каким требованиям должен соответствовать человек, который хочет добиться успеха в области IT? Во-первых, начинающий специалист должен постоянно учиться, идти в ногу с технологиями и самосовершенствоваться. Во-вторых, он должен быть готов поддерживать коммуникацию внутри компании и с клиентами. Очень важная часть работы в ИТ – умение работать в команде, находить общий язык с другими ее членами и, конечно, с клиентом. Некоммуникабельные и тяжелые в общении люди не приживутся в компании, даже если им удастся туда попасть из-за некомпетентности hr-специалиста. Какие перспективы работы в аутсорсинге? Стоит начать с того, что вообще такое аутсорсинг в IT.  Это процесс найма иностранными клиентами работников из стран с относительно небольшими зарплатами. Поэтому количество аутсорсинговых компаний растет, многие клиенты ищут исполнителей в Украине. Стоит понимать, что аутсорсинг – временная работа. Один проект может длиться максимум один-два года. Но за это время Вы получите опыт и возможность проявить себя перед заказчиком. Если он увидит, что вы компетентны и преданы их компании, могут пригласить на работу в свою компанию за границей. Но быстрого карьерного роста ждать не стоит. Стоит ли вообще идти в мир IT? Давайте признаемся, что фраза о том, что IT – интересно – для hr-специалистов. На самом деле, большинство людей привлекает стабильность и несложность работы. Да, это действительно несложно. Барьер входа в сферу IT значительно снизился за последние годы, так как компании хотят удешевить разработку, нанимая дешевых специалистов и упрощая технологии, с которыми нужно работать. Сейчас ценится быстрота работы, а не абсолютная точность выполнения. Что выбрать: front-end, back-end или .NET? Вопрос прежде всего в том, кто где себя видит. Да, Вы можете слышать, что back-end – святая святых, но, на самом деле, хорошие специалисты нужны везде, поэтому нужно исходить из того, что Вам больше нравится и больше подходит. Но не стоит пытаться делать всё и сразу. Например, общение с клиентами отнимает у разработчика очень много времени и не должно входить в его обязанности, для этого есть бизнес-аналитики. Разработчики не должны вникать в то, о чем пишут. Им не обязательно учить юриспруденцию или экономику. Прежде всего, они должны развиваться в своей профессии, читать свою профессиональную литературу и быть хорошими разработчиками. Что делать людям, которые стоят перед выбором: учеба или работа? По логике, сначала должна быть учеба, потом, после окончания университета, Вы попадаете на практику, а потом уже идете на работу. Конечно же, сначала нужно учиться. Таким образом, Вы получаете большой багаж разносторонних знаний, которые потом сможете применить на практике. В университете Вы изучаете много предметов, много языков программирования. Но, в реальности, нужно учиться и работать. Все студенты работают – курьерами, официантами, продавцами и программистами, потому что это несложно. С чего стоит начинать обучение людям, которые никогда до этого не работали в ИТ? Начать нужно с азов, с машинной математики. Если Вы действительно решили стать айтишником и не спешите, стоит начать с Питера Абеля. Это старые книги по ассемблеру. Введение в его книге – это введение в машинную математику, там говорится о том, как основные процессы происходят на самом низком уровне. Чтобы стать программистом, нужно понять основы вычислительной техники, что такое процессор, бит, байт. Мы подробно рассказываем об этом на стартовом курсе C#. Какие материалы помогут тем, кто не имеет возможности учиться в университете или посещать специализированные курсы, но хотят научиться сами? Далеко не все предметы в университете нужны для того, чтоб стать девелопером. Например, чтобы стать программистом с C#, нужно прочитать Эндрю Троелсена, Герберта Шилдта – они очень популярны сейчас, и это хорошо. Дальше можно перейти к Джеффри Рихтеру. Самообучение – за и против. Основные плюсы самообучения – человек воспитывает себя, развивает усидчивость, читает большое количество литературы. Это очень непросто, нужен постоянный стимул и мотивация. Главный минус самообучения: человек психологически устроен так, что ему требуется подтверждение того, правильно ли он понял/сделал/подумал. Если учить технологии самому, так или иначе возникает много вопросов и сомнений. И, чтобы добиться подтверждения, нужно потратить много времени на поиски ответа в литературе или в сети. Получается, что на то, на что можно потратить 20 секунд, человек тратит десятки минут. Поэтому лучше общаться с человеком, который может вселить уверенность в правильности Ваших действий и указать на ошибки. Но идеальный вариант – пройти специализированные курсы, где профессиональный тренер сможет сразу же ответить на все Ваши вопросы. Из любой профессии можно войти в IT? Да, есть много программистов-врачей, юристов, учителей. И из них получаются хорошие айтишники. Не факт, что человек, который придет в IT из другой профессии, станет суперспециалистом, но программировать он будет. Потому что это совсем несложно. Вряд ли у врача получиться работать в Майкрософт, потому что там ему придется конкурировать с выпускниками Стэнфорда, Массачусетса. И они его просто-напросто задавят. Прежде всего, потому что там намного лучше уровень образования.

Введение: Адаптивный веб-дизайн – это один из главных показателей качества сайта, который отвечает за корректность его отображения на разных устройствах в виде динамических изменений под заданные размеры окна браузера. Для создания адаптивных веб-страниц Вам стоит ознакомиться с реализованной Bootstrap системой разметки - «сетка» (Bootstrap grid). Сетку формируют 12 отдельных столбцов, которые также могут использоваться группами для создания более широких колонок. Система разметки Bootstrap является адаптивной, вследствие чего столбцы перестроятся в соответствии с размером экрана. Сетка включает в себя такие классы: xs (для телефонов) – менее 768px sm (для планшетов) – от 768px md (для ПК и ноутбуков) – от 992px lg (для ПК с мониторами большой диагонали) – от 1200px Наглядный пример разметки страницы на строки и столбцы для отображения на ПК: В коде это может выглядеть так:     <div class="row">         <div class="col-sm-4">.col-sm-4 div>         <div class="col-sm-4">.col-sm-4 div>         <div class="col-sm-4">.col-sm-4 div>     div> Или так: <div class="row">         <div class="col-sm-4">.col-sm-4 div>         <div class="col-sm-8">.col-sm-8 div>     div> К столбцам можно применять несколько классов, что укажет, как именно они перестроятся при просмотре на устройствах с разными размерами экранов. К примеру:     <div class="row">         <div class="col-md-4 col-sm-12 col-sm-12">             Responsive block 1         div>         <div class="col-md-8 col-sm-12 col-sm-12">             Responsive block 2         div>     div> Рассмотрим первый пример. Первым делом, откройте предпочтительную Вам среду разработки и создайте файл index.html. Далее потребуется подключить сам Bootstrap. Есть два варианта подключения: Вашего файла соответствующие-и;следующий код: Вашего файла соответствующие-и;следующий код: скачать .zip с официального сайта(http://getbootstrap.com/) и добавить в воспользоваться более быстрым способом и просто подключить с помощью CDN добавив в        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">script> Далее, создадим контейнер, который послужит оберткой для дальнейшего кода. В Bootstrap существуют два класса контейнеров: “container” и “.container-fluid”. Сразу скажу о том, что адаптивности, как таковой, мы добьемся, используя контейнер как первого, так и второго типа. Различие между ними состоит в том, что “.container” будет имеет фиксированную максимальную ширину, в то время как “.container-fluid” является “резиновым” и растягивается на всю ширину экрана. Подробнее о контейнерах можно прочесть на сайте (http://getbootstrap.com/css/#grid) в разделе Containers. Давайте рассмотрим, как это работает на примере. Пример: Создадим с классом “container” в и добавим в него две строки ( с классом “row”). В первую строку добавим два столбца, а во вторую три столбца.  Главное помнить, что суммарное количество столбцов должно быть равным двенадцати. Код выглядит так: DOCTYPE html> <html> <head>        <meta charset="utf-8">               <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">script> head> <body>        <div class="container-fluid">               <div class="row">                      <div class="col-md-4 col-sm-4" >                       Первая строка, первый столбец.                      div>                      <div class="col-md-8 col-sm-8" >                       Первая строка, второй столбец.                      div>               div>               <div class="row">                      <div class="col-md-4 col-sm-12" >                       Вторая строка, первый столбец.                      div>                      <div class="col-md-4 col-sm-12" >                       Вторая строка, второй столбец.                      div>                      <div class="col-md-4 col-sm-12" >                       Вторая строка, третий столбец.                      div>               div>        div> body> html> Давайте откроем пример в браузере и посмотрим на результат. Мы видим, что ширина содержимого страницы фиксированная и не растягивается на всю ширину окна. Для того чтобы увидеть, как перестраиваются столбцы, нужно изменить размер окна браузера. Сперва столбцы перестроятся так: А затем так: Теперь давайте изменим класс нашего на класс “container-fluid”, а все остальное оставим без изменений. Затем откройте Вашу страничку в браузере и посмотрите разницу. Попробуйте изменить размеры окна и посмотрите, как перестраиваются столбцы. Результат после изменений выглядят так: Разобравшись с различиями между этими двумя классами контейнеров, можно приступить к работе с самой сеткой. Предлагаю рассмотреть адаптивность системы разметки Bootstrap на примере создания формы регистрации пользователя. Второй пример: Создадим html страницу со стандартной структурой. Между тегами вставляем с классом “container” для того, чтобы максимальная ширина формы была фиксированной. DOCTYPE html> <html> <head>     <meta charset="utf-8">         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">script>     <title>Our registration formtitle> head> <body>     <div class="container">     div> body> html> Теперь мы можем начать работу непосредственно над нашей формой. Добавим в контейнер с классом “row” и в него один с классами “col-xs-12 col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4”. Здесь “col-xs-12 col-sm-6 col-md-4” -  уже знакомые нам классы, которые будут задавать ширину формы при разных размерах экрана. Акцентирую внимание на классах “col-sm-offset-3 col-md-offset-4”. Подобные классы “col-md-offset-*” используются для смещения колонок, задавая отступ слева от столбца, к которому они применены на «*» количество колонок. В нашем примере будет сделан отступ шириной в 3 колонки при размере экрана менее 768px, и отступ размером в 4 колонки  при размере экрана от 992px.     <div class="container">         <div class="row">             <div class="col-xs-12 col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4">             div>         div>     div> Нашу форму следовало бы упаковать в компонент-панель (для удобства). За это отвечает класс “panel”. Применим его к . К этому же применим класс “panel-primary”, который задает синий фон для заголовка. Для добавления самого заголовка также потребуется отдельный с классом “panel-heading”, в который уже помещают теги для задания заголовков любого уровня с примененным к ним классом “panel-title”. <div class="container">     <div class="container">         <div class="row">             <div class="col-xs-12 col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4">                 <div class="panel panel-primary">                     <div class="panel-heading">                         <h3 class="panel-title">Registration formh3>                     div>                 div>             div>         div>     div> На данном этапе наша форма в браузере будет выглядеть так: После … добавим тег с классом “panel-body” и непосредственно в этот мы будем добавлять поля для заполнения пользователем. В нашей форме будут такие поля: Имя Фамилия Email Пароль Поле для повторного введения пароля, как его подтверждение В качестве поля ввода мы будем использовать тег   с атрибутом type, установленным разными значениями. Нужно отметить, что я использую HTML5, в котором для данного атрибута добавлены определенные значения для адресов электронной почты. Подробнее об этом вы сможете узнать из статьи (http://htmlbook.ru/html/input/type). Также нам понадобится кнопка для подтверждения ввода и дальнейшей отправки информации о пользователе на сервер. В Bootstrap имеется специальный класс “btn” для создания кнопок. Реализуем кнопку с помощью тега    с атрибутом “submit” и  классами “btn btn-info”, где класс “btn-info” задает кнопке синий цвет. Подробнее о кнопках вы сможете прочесть на сайте в разделе Buttons. Нам нужно добавить три с классом “row” внутрь с классом “panel-body”.  В первой и третьей строке будет по два столбца, а во второй строке - один. В данном примере каждое поле формы при уменьшении размера окна перестроится и будет расположено в отдельной строке. Код выглядит так: <div class="panel-body">         <div class="row">             <div class="col-xs-12 col-sm-6 col-md-6">                 <input type="text" class="form-control input-sm" placeholder="First name">             div>             <div class="col-xs-12 col-sm-6 col-md-6">                 <input type="text" class="form-control input-sm" placeholder="Last name">             div>         div>         <div class="row">             <input type="email" class="form-control input-sm" placeholder="Email">         div>         <div class="row">             <div class="col-xs-12 col-sm-6 col-md-6">                 <input type="password" class="form-control input-sm" placeholder="Password">             div>             <div class="col-xs-12 col-sm-6 col-md-6">                 <input type="password" class="form-control input-sm" placeholder="Confirm password">             div>         div>         <input type="submit" value="Register" class="btn btn-info btn-block">     div> На данном этапе форма выглядит так: Изменив размеры окна, мы увидим адаптивность в действии: Наша форма уже является адаптивной, но между строк отсутствуют отступы, что портит внешний вид нашей формы. Для устранения этой проблемы воспользуемся простым решением. Каждый стоит вложить в с классом “form-group” , который задаст отступы от полей сверху и снизу. Подобного результата можно добиться, используя свойство CSS -  “margin”. <div class="panel-body">         <div class="row">             <div class="col-xs-12 col-sm-6 col-md-6">                 <div class="form-group">                     <input type="text" class="form-control input-sm" placeholder="First name">                 div>             div>             <div class="col-xs-12 col-sm-6 col-md-6">                 <div class="form-group">                     <input type="text" class="form-control input-sm" placeholder="Last name">                 div>             div>         div>         <div class="row">             <div class="form-group">                 <input type="email" class="form-control input-sm" placeholder="Email">             div>         div>         <div class="row">             <div class="col-xs-12 col-sm-6 col-md-6">                 <div class="form-group">                     <input type="password" class="form-control input-sm" placeholder="Password">                 div>             div>             <div class="col-xs-12 col-sm-6 col-md-6">                 <div class="form-group">                     <input type="password" class="form-control input-sm" placeholder="Confirm password">                 div>             div>         div>         <input type="submit" value="Register" class="btn btn-info btn-block"> div> Запустив пример в браузере, Вы увидите привлекательную форму регистрации пользователя. Уменьшив размер, получим: Надеемся, что статья была для Вас полезной и послужит толчком для создания потрясающих веб страниц с помощью Bootstrap(http://getbootstrap.com/)!

Введение Технология ADO.NET была создана, чтобы упростить задачу разработчиков и помочь им максимально эффективно работать с многоуровневыми базами данных через интернет или Интернет-сценарии. Данная статья подробно расскажет Вам об объектах ADO.NET, их предназначении, функциях и отношениях. Объектная модель ADO.NET включает в себя две основные составляющие: Соединенная модель (.NET Data Provider – ряд компонентов, в который входит Connection, Command, DataReader и объекты DataAdapter); Отсоединенная модель (DataSet). DataSet Объект DataSet – родительский объект к большинству других объектов в пространстве имен System.Data. Набор данных – отсоединенное представление данных в оперативной памяти. Его основная задача – сохранить как коллекцию DataTables, так и Relations и Constraints между этими объектами DataTables. DataSet содержит несколько методов чтения и записи XML, а также слияния других DataSets, DataTables и DataRows. Некоторые преимущества объекта DataSet: Считывание / Запись; Отсутствие необходимости устанавливать соединение; Содержит один или более объектов DataTable с взаимоотношениями, определенными в коллекции объектов DataRelation; Поддержка фильтрации и сортировки; Содержащийся в DataView объект может быть связан с формами data-aware; Поддерживает автоматическую сериализацию XML (создание XML-документа). DataTable DataTable хранит таблицу информации, обычно полученную от источника данных. DataTable позволяет Вам исследовать фактические строки DataSet через наборы столбцов и строк. Вы можете комплексно связывать управление элемента с информацией, содержащейся в таблице данных. Такое управление, как DataGrid, используется для достижения этой цели. DataTable также хранит информацию таблицы метаданных, такую как первичный ключ и ограничения. DataRows Класс DataRow разрешает Вам ссылаться на определенную строку данных в DataTable. Этот класс разрешает Вам редактировать, принимать или отклонять изменения в отдельных DataColumns. Вы могли бы использовали объект DataRow и его свойства, методы, чтобы получить и оценить значения в объекте DataTable. DataRowCollection представляет фактические данные DataRow, которые находятся в объекте DataTable, также DataColumnCollection содержит данные DataColumn, описывающие схему объекта DataTable. DataColumns DataColumns – стандартный блок DataTable. Такие объекты составляют таблицу. У каждого объекта DataColumn есть свойство DataType, определяющее вид данных в столбцах. Экземпляры DataColumn используются для чтения и записи отдельных столбцов базы данных. Свойство Items DataRow возвращает DataColumn. DataView DataView – объект, обеспечивающий пользовательское представление данных в DataTable. DataViews предоставляет возможность сортировки, фильтрации и других типов настроек. У каждого объекта DataTable есть свойство DefaultView, содержащее в себе объект DataView по умолчанию для DataTable. Изменение объекта DefaultView устанавливает характеристики дисплея по умолчанию для DataTable. Вы можете создать экземпляр DataView и связать его с определенным DataTable в DataSet. Это позволяет Вам увидеть один и тот же DataTable с двух разных сторон одновременно. DataRelation DataRelation предназначен для создания родительских отношений между двумя или более объектами DataTable и DataSet. Определить отношение между двумя таблицами можно, добавив новый объект DataRelation к DataSet. Constraints Каждый DataColumn может иметь несколько Constraints (ограничений). Constraints-объекты поддерживаются через DataTable коллекции Constraints. DataRowView DataRowView – специальный объект, который представляет строку в DataView. У каждого DataView может быть разный RowStateFilter. DataRowView, полученный из DataView, содержит данные, непротиворечивые с RowStateFilter DataView, обеспечивая пользовательское представление данных. Источник: http://www.c-sharpcorner.com/uploadfile/puranindia/ado-net-objects-part-ii/

Введение В такой среде, как веб-разработка, всегда есть куда развиваться. Поэтому Вам нужно следить за появлением новых продуктов, позволяющих сделать Ваш сайт лучше и интереснее. В этой статье Вы ознакомитесь с полезными 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-технологий с каждым годом будет только увеличиваться.