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

Введение 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. Всем спасибо и удачного кода.