Введение Привет всем. Многие студенты, которые решили связать свою жизнь с програмированием, задаются такими вопросами: - что выбрать своим главным инструментом в работе? - чем пользуется большинство? - чем пользоваться при написании своего кода? - что лучше? На эти вопросы нет однозначного ответа, каждый редактор по-своему хорош. Но постараюсь описать главные возможности тех редакторов, с которыми я сам столкнулся и пользовался в своей практике. Сразу внесем ясность и расставим точки над i. Средства разработки делятся на два главных класса: 1 – Интегрированные среды разработки (IDE) 2 - Текстовые редакторы (text editor) Официальное определение  интегрированная среда разработки можно найти по адресу: https://ru.wikipedia.org/wiki Официальное определение текстовый редактор по адресу: https://ru.wikipedia.org/wiki Попытаюсь объяснить  разницу между двумя этими классами своими словами. Интегрированная среда разработки - это как швейцарский нож или трактор, он мультифункционален, а следственно, и граничен. Может делать много, но некоторые вещи делает не так, как нам хотелось бы. Посудите сами: трактор ведь может тянуть тяжелый груз, копать и, главное, может передвигаться. Но все это он делает медленно. К примеру, если стоит задача переместиться из пункта “А” в пункт “Б” (что является одной из функций трактора), для этого лучше пригодится спорткар или обычный легковой автомобиль, для этой операции нами не нужен трактор со всеми его функциями. Следовательно, мы можем сделать вывод, что для определенных операций нам нужны определенные инструменты. В этой статье я не буду рассматривать IDE и их фичи (feature). Хочу рассказать о главных текстовых редакторах и их возможностях. Мой TOP текстовых редакторов: 1. Sublime Text 2. Brackets 3. Visual Studio Code (на этом месте был Atom) Пробовал, но не понравились/не подошли, по каким-либо причинам (поэтому не рассматриваю их тут) 1. Notepad++ (Сайт https://notepad-plus-plus.org/) 2. Komodo Edit (Сайт http://komodoide.com/komodo-edit/) 3. Atom (Сайт https://atom.io/) 4. Textmate (Сайт https://macromates.com) Итак ,начнем. Sublime Text 3 сайт: http://www.sublimetext.com/3 Чем нравится: кроссплатформенный легкий большая и понятная библиотека плагинов (дополнений) легко настроить под себя Что следует сделать после установки. Зайти на сайт https://packagecontrol.io/installation И сделать все согласно инструкции, открыть консоль Саблайма: найти вкладку View  и кликнуть Show Console. В появившемся снизу поле ввода вставить следующий код: import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by) Должно получиться вот так: Жмем Enter. Так мы установили Package Control в наш Sublime. Теперь мы можем устанавливать плагины в редактор, нажав сочетание клавиш Ctrl+Shift+P on Windows/Linux, ⇧⌘P on OS X На сайте https://packagecontrol.io/ вы найдете множество плагинов с детальным описанием, руководством установки и руководством использования. Теперь о плагинах. Плагин – грубо говоря, это дополнение программы. Официальное определение https://ru.wikipedia.org/wiki Плагины, которые пригодились мне в работе, возможно, пригодятся и вам. 1. Emmet - https://packagecontrol.io/packages/Emmet Плагин, который помогает быстро набирать код. С помощью шпаргалки вы быстро научитесь быстро набирать сложные конструкции html, указав лишь название тега и  порядок иерархического положения елемента на странице. Его официальный сайт http://emmet.io/ и шпаргалка http://docs.emmet.io/cheat-sheet/ Еще одно условие: для работы этого дополнения нужен предустановленный nodeJS. Найти его можно тут: https://nodejs.org/ Думаю, что nodeJS у вас уже был предустановлен, а если не был, то он вам точно еще пригодится не раз. 2. SublimeCodeIntel - https://packagecontrol.io/packages/SublimeCodeIntel Плагин портирован из текстового редактора Komodo Editor, помогает автодополнением к языкам программирования JavaScript, Python, Ruby, XML, HTML, CSS, PHP и другим. 3. SideBarEnchancements - https://packagecontrol.io/packages/SideBarEnhancements Плагин открывает новые возможности боковой панели для работы с Вашими проектами. 4. BracketHighlighter - https://packagecontrol.io/packages/BracketHighlighter Плагин позволяет отображать дополнительные скобки возле номеров строк, отображая, к примеру, блоки кода. 5. AutoFileName - https://packagecontrol.io/packages/AutoFileName Плагин говорит сам за себя, когда мы пишем пути к нашим фалам, помогает, выводя дополнительное выскакивающее окошко, с выбором папок или файлов. 6. HTML-CSS-JS Prettify https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify Плагин “расческа”. Причесывает наш код, делает его более читабельным для человеческого глаза. 7. Color Highlighter - https://packagecontrol.io/packages/Color%20Highlighter Плагин подсвечивает цвета при написании вайлов CSS/Less/SASS/SCSS/Stylus. Остальные плагины, для работы с такими библиотеками как jQuery, Bootstrap, AngularJS,  советую устанавливать осторожно, потому как постоянно выскакивающие окошки с помощью какого либо плагина если не пугают, то начинают очень надоедать. Поэтому советую не превращать текстовый редактор в “неубранный балкон”. Также есть возможность установки из того-же Package Control множества тем и цветовых схем. Темы и цветовые схемы отличаются тем, что тема  меняет полностью весь внешний вид Sublime, цветовая схема  меняет только цвета подсветки синтаксиcа. Файл настроек находится во вкладке Preferences>Settings Default/Settings User. Почему именно два файла? Потому что вы сможете изменять только Settings User. Оба файла являются, по сути, JSON объектами, поэтому разобраться и изменять свои настройки вы научитесь довольно быстро. Brackets сайт - http://brackets.io/ Этот текстовый редактор также поддерживает большинство перечисленых плагинов, и даже если таковых вы не найдете, то их аналоги точно есть в песочнице. На правой боковой панели вы найдете несколько кнопок: Первая в виде молнии – LivePreview. Запускает страницу с рашрирением html в вашем браузере, который установлен по умолчанию, браузер будет сам обновлять страницу.  Вторая в виде лего – Extension Manager. При клике вызывает модальное окно в, котором содержатся вкладки меню для выбора плагинов, тем, их установке и удалению.  Третья в виде “слоев торта” со стрелочкой вверх – Extract for Brackets. Ради этой кнопки и стоит устанавливать этот редактор. Она позволяет после регистрации загрузить файлы psd формата для верстки прямо  из текстового редактора, не загружая ничего больше.  Кликаете по кнопке Open PSD Регистрируетесь или же входите под своим Adobe ID, загружаете PSD шаблон и начинаете верстать в разы быстрее. Кликнув по какому либо элементу на шаблоне, вы можете моментально перенести: текст, css свойства, или же выгрузить картинку из шаблона пряму в папку с проектом. С такими возможностями верстка становится в разы быстрее! Не агитирую, просто  советую попробовать) Visual Studio Code сайт - https://code.visualstudio.com/ Бесплатный кроссплатформенный текстовый редактор, основанный на технологиях замечательного текстового редактора Atom от GitHub. Подробное описание можно прочитать по ссылке ниже: https://uk.wikipedia.org/wiki/Visual_Studio_Code Также будет полезна ссылка с документацией: https://code.visualstudio.com/Docs/setup Отличный текстовый редактор от компании Microsoft. Облегченная и кроссплатформенная версия Visual Studio. Имеет схожий дизайн со своим старшим собратом. Похожие темы и подсказки в виде выпадающих окошек (контекстные подсказки). Так что разработчикам, перешедшим с Visual Studio, будет гораздо легче адаптироваться. Еще несколько плюсов с коробки: поддержка таких языков програмирования: JavaScript, C++, C#, PHP, XML, Java, Objective-C, HTML, CSS, Less, Sass и т.д. (полный перечень находится в документации). отладчик инструменты для работы с Git автодополнения в стиле Emmet. Настоятельно рекомендую обратить внимание и попробовать Visual Studio Code. Даже просто потому, что вы установите его и все, дальше просто приступаете к работе :) На этом все. Думаю, что изложил свои мысли достаточно простым языком. Помните, что не важно, в каком текстовом редакторе или IDE вы работаете, это всего лишь инструмент, в конечном итоге вы можете остановить свой выбор на обычном блокноте и там разрабатывать приложения, для того, чтобы писать программы не обязательно иметь подсветку синтаксиса, всякие плюшки, главное, чтобы вам было удобно и при написании вы чувствовали себя комфортно. Выбор за вами. Удачи!

Введение Многие разработчики заблуждаются, считая, что CSS – единственный способ работы с анимацией в WEB. CSS становится все более и более популярным, он считается самым надежным и удобным инструментом создания анимаций. Но это не означает, что он лучше, чем JavaScript. В этой статье мы расскажем, почему лучше использовать JavaScript, а не CSS, а также разоблачим мифы, связанные с CSS. 1. JQuery JavaScript и JQuery ошибочно объединяют. Анимации, разработанные с JavaScript – быстрые и динамичные, тогда как анимации JQuery – медленные. Причина в том, что несмотря на его мощные инструменты, JQuery  не был создан для анимации. 2. Отсутствие управления вращением и позиционированием Для выполнения анимации необходимо использовать элементы управления вращением и определением позиции. В CSS все эти функции содержатся в свойстве «transform». Это создает проблемы для уникальной анимации чего-либо через один общий элемент. Например, анимирование «rotation» и «scale» отдельно, с разными таймингами, возможно только с JavaScript, потому что он позволяет использовать различные функции, не поддерживаемые CSS. CSS удобно использовать только для простой анимации. 3. Производительность с Velocity и GSAP Velocity и GSAP – наиболее популярные библиотеки JavaScript. Они работают без JQuery. Нет уменьшения производительности, так как эти библиотеки работают за пределами основных анимаций JQuery. Velocity и GSAP можно применять даже, когда jQuery не используется на странице.  * Работа без JQuery * / Velocity(element, { opacity: 0.4 }, 900); // Velocity TweenMax.to(element, 1, { opacity: 0.4 }); // GSAP В приведенном выше примере Вы видете, что velocity использует тот же синтаксис, даже когда JQuery не применяется. Он просто смещает все элементы в правильном направлении, чтобы создать пространство для целевых элементов. 4. GPU-фактор Полностью оптимизированный код с GPU отлично подходит для выполнения различных задач, включая преобразование матриц и изменение прозрачности, поэтому все ведущие браузеры сначала перенаправляют такие задачи от CPU к GPU. Нужно разделять все анимационные элементы на разные слои GPU. Таким образом мы избавимся от необходимости вычислять каждый пиксель в каждой минуте. Можно сэкономить много времени, просто перемещая один пиксель за другой. Обратите внимание: нет необходимости делать собственный слой для каждого элемента из-за ограничения видеопамяти GPU. 5. Быстрые анимации JavaScript JavaScript обходит CSS в производительности и скорости. JavaScript достаточно универсальный, чтобы создать впечатляющую 3D демо-анимацию, которую Вы можете увидеть через WebGL. Он достаточно быстрый, чтобы построить мультимедийный тизер, разработанный с использованием Flash, или After Effects. С JavaScript это легко сделать с помощью canvas. Вывод Данная статья доказывает, что анимация JavaScript более быстрая, по сравнению с анимацией CSS. Но это не означает, что CSS не стоит использовать. Он хорошо подходит для простой анимации, но если Вы хотите сделать анимацию более гибкой, Вам лучше использовать JavaScript. Источник: http://www.script-tutorials.com/css-vs-javascript-myths-fall-to-pieces/

Введение Если Ваш бизнес достаточно рентабелен, Вы можете считать, что не нуждаетесь в SEO, так как это технически сложное и трудоемкое дело. Но если Вы отнесётесь к SEO поверхностно и небрежно, Вы можете ухудшить состояние Вашего бизнеса. Вам нужно помнить, что в Google часто меняют правила. В этой поисковой системе был крупный ряд обновлений и, несмотря на их приятное описание, они ужасно повлияли на владельцев веб-сайтов всего мира. Подготовка и планирование SEO-кампании может казаться Вам непреодолимым препятствием. Почему необходимо подготовиться и узнать как можно больше о SEO, прежде чем приступить к работе? Ваш сайт может получать 30-60 % траффика из поисковых систем, но если Вы посмотрите статистику ключевых слов в своей учётной записи (в Google Webmaster Tools), то Вы скорее всего увидите, что около 30-50 % ключевых слов, используемых для поиска Вашего сайта, это товарные знаки – названия Ваших продуктов или компаний. Такой поиск осуществляется людьми, которые уже знаю о Вас. Но не знающие Вашего бренда и ищущие то, что Вы продаёте, не могут найти Ваш ресурс. Если пользователи хотят найти продукт или компанию по названию, Google легко направит их к цели поиска. А SEO существует для помощи пользователю найти необходимую ему услугу или товар, которые Вы можете предоставить, даже если он не знает Вашего имени. Эта статья поможет Вам узнать, что делать для улучшения поиска. Что такое настоящее SEO? Настоящее SEO – это всё, что помогает поисковой системе понять содержимое Вашего веб-ресурса. Даже если Google понял содержание и актуальность каждой страницы веб-сайта, необходимы также многократные его просмотры пользователями. Понимание Вашего положения – Google Analytics Прежде чем перейти к улучшению своего SEO-рейтинга, Вам нужно разобраться в своём текущем положении. Простой и быстрый способ сделать это: 1. Откройте Вашу учётную запись в Google Analytics. 2. В диапазоне дат, в правом верхнем углу, измените нынешний год на предыдущий. К примеру, 5 января 2015 станет 5 января 2014. Затем выберите Apply. 3. Потом нажмите All Sessions, выберите Organic Traffic и кликните Apply. 4. Нажмите на небольшой чёрно-белый квадратный значок в правом верхнем углу и перетащите ползунок к режиму Higher Precision (высокая точность). 5. Нажмите на кнопку интервала Week, чтобы график стал более простым для понимания. Сейчас Ваш график будет выглядеть приблизительно так: 6. Нажмите на стрелочку справа от All Sessions и выберите команду Remove. 7. Нажмите на Select a metric, рядом с кнопкой Sessions над графиком, и выберите Pages / Session. На экране должно быть что-то подобное: Выше мы видим, что количество трафика увеличивается с середины августа, но его качество (количество просмотренных страниц за одну сессию) снизилось. Объединение данных Сессия в Google Analytics показала Вам качество Вашей работы со стороны SEO и количество Ваших посетителей. Но статистика демонстрирует то, что уже работает, количество людей, находящих Ваш ресурс в поисковых системах и переходящих на него по ссылке. Запрос данных в Google Webmaster Tools даст Вам представление о недочетах. Он покажет статистику запросов и ключевых слов, по которым пользователи не переходят на Ваш веб-сайт. Чем меньше пользователей будут переходить на Ваш ресурс, тем на более дальних позициях в поиске он окажется. По каким ключевым словам Вы бы хотели, чтобы Вас находили? Неправильный подбор ключевых слов – одна из самых распространенных и важных ошибок в SEO. Многие полагают, что не нужно беспокоиться относительно своих ключевых слов. Они считают, что им известно, какие слова используются для поиска их товаров. Также они предполагают, что Google освоил содержание их сайтов. Все эти утверждения ошибочны. Проведите коллективное обсуждение маленького ряда Ваших наиболее очевидных ключевых слов, затем проверьте их с помощью Google’s Keyword Planner. Игнорируйте информацию в Ad group ideas, опирайтесь на Keyword ideas. Вместо того, чтобы пользоваться очень неудобным интерфейсом, рекомендуем скачать данные как электронную таблицу, где можно их изменять и сортировать. Из таблицы можно удалить все неуместные столбцы или ключевые слова. На этом этапе Вы можете устранить проблему поиска Вашего веб-сайта пользователями. Число зафиксированных поисков определенного ключевого слова важно, но ещё важнее – уровень конкуренции. Определяется по формуле: (число поисков × число поисков) ÷ конкуренцию Есть множество альтернатив формулы, но данный вариант наиболее простой. Это слегка запутанная, но вполне эффективная методология исследования ключевых слов. Действительно ли SEO просто? 70 % SEO – несложно. Если у Вас есть список актуальных для Вашей продукции ключевых слов, все, что нужно сделать – создать под них качественный контент. Но существует одно простое правило: созданное Вами содержание должно быть не только хорошего качества, но и совершенно оригинальным, а также он должен быть написан прежде всего для пользователя-человека, а не паука поисковой системы. Каждая статья должна быть ценной и полезной для читателя. Но остальные 30 % требуют не просто создания хорошего содержания и ожидания посетителей. Вы должны помочь Google понять содержание на своих страницах, входящие ссылки, авторитет домена, авторитет страницы, факторы спама и многое другое. Однако, даже если Вы не вмешиваетесь в эти 30 % SEO, создавая правильный контент для правильных посетителей, используя терминологию Ваших потенциальных клиентов, Ваш сайт будет лучше, чем ресурс Ваших конкурентов. Вывод SEO – очень важная часть продвижения любого бизнеса. Для того, чтобы Ваша SEO-кампания прошла успешно, нужно изучить свое текущее положение, выявить свои сильные и слабые стороны. Затем следует работать с качеством контента Вашего ресурса, делая его максимально удобным для пользователя, используя ключевые слова для улучшения поиска Вашего сайта в поисковых системах. Только на третьем этапе, после выполнения всего вышеперечисленного, стоит приступать к оптимизации понимания Вашего сайта системой Google. Источник: http://24ways.org/2014/seo-in-2015-and-why-you-should-care/

Введение AngularJS – фреймворк-библиотека Javascript, разработанная для создания одностраничных приложений на основе MVC (Model-View-Controller) шаблона. Будем осваивать данную технологию на практике. Создадим HTML страничку со стандартной структурой. Далее нам нужно преобразовать ее в одностраничное приложение. Для этого подключим AngularJS к своей странице, добавив в тег с данным кодом: <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> script> Следующим шагом мы явно укажем на то, что наша страница является AngularJS приложением. Нужно добавить ng-app директиву, которой мы обозначим корневой элемент приложения. Зачастую таким элементом выступает тег или же тег . Добавим эту директиву к :  <!DOCTYPE html> <html ng-app=""> <head>     <title>title>     <meta charset="utf-8">     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">     script> head> <body> body> html> Проверим,  все ли работает, добавив небольшое выражение для подсчета произведения чисел 123 и 45. В AngularJs все выражения записываются в двойных скобках. Добавим в параграф со следующим содержимым: <p>Результат произведение чисел 123 и 45 равен : {{ 123 * 45 }}p> Запустим в браузере:  Теперь у нас есть готовый шаблон приложения, который мы будем использовать во всех последующих примерах. AngularJS позволяет разработчику легко взаимодействовать с пользовательским вводом. Для этого есть соответствующая директива ng-model, которая связывает значения HTML элементов контроля (teaxtarea, input etc.) с приложением. Использовать эти данные поможет директива ng-bind, добавив эти данные во View (элемент MVC) и отобразив их на странице. Применим полученные знания на практике. В созданный ранее шаблон добавим поле для ввода <input> с директивой ng-model и параграф для вывода данных c директивой ng-bind. Код странички: <!DOCTYPE html> <html ng-app=""> <head>     <title>title>     <meta charset="utf-8">     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">     script> head> <body>     <p>Ввведте свое имя:p>     <input type="text" ng-model="yourName">     <p>Здравствуй, <span ng-bind="yourName">span>p> body> html> Откроем в браузере: Теперь попробуйте ввести свое имя в поле для ввода. Давайте добавим в данный пример дефолтное значение имени, к примеру Анна. Сделаем это, конечно же, с помощью директивы ng-init, которая позволяет инициализировать любую переменную AngularJS приложения. В строку  добавим директиву ng-init. <input type="text" ng-model="yourName" ng-init="yourName='Aнна'"> Посмотрим изменения в браузере: Теперь мы имеем значение по дефолту – Анна, но все так же можем изменять его: Вывод данных в этом примере можно сделать еще одним способом, а именно, использовав выражение. Заменим на {{yourName}}. <p>Здравствуй, {{ yourName }}p> Открыв страницу, мы не увидим абсолютно никаких изменений, а все потому, что выражения в AngularJS связывают данные со страничкой точно так же, как и ng-bind директива. Как упоминалось в статье ранее, AngularJS строит приложения на основе MVC. Часть модель – представление (Model - View) определяется с помощью директивы ng-app. Контроллер в свою очередь определяется директивой ng-controller. Рассмотрим пример с использованием контроллера страницы. Создадим страничку со списком гостей, которых Вы пригласите на свой день рождения. К созданному ранее шаблону добавим контроллер, а так же установим имя для приложения. В тег внесем следующие изменения: <html ng-app="firstApp" ng-controller="firstController"> Далее добавим с типом text для введения имени гостя и еще один с типом submit для добавления гостя в список. Также добавим с полем для вывода списка и чекбоксом с типом checkbox для того, чтобы можно было удалять тех, кто не придет на ваш праздник. В данный добавим директиву ng-repeat, отвечающую за повторение данных в обозначенном контейнере. <!DOCTYPE html> <html> <head>     <title>title>     <meta type="utf-8">     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">script> head> <body ng-app="firsApp" ng-controller="firstController">     <h2>Мои гости:h2>     <form ng-submit="addGuest()">         <input type="text" ng-model="guestsInput" size="50" placeholder="Введите имя гостя">         <input type="submit" value="Добавить гостя">     form>     br>     <div ng-repeat="guest in listOfGests">         <input type="checkbox" ng-model="guest.come"> <span ng-bind="guest.guestName">span>     div>     <p><button ng-click="remove()">Удалить гостя button>p> body> html> Осталось добавить скрипт, который будет содержать функции для работы с элементами нашего приложения. Замечу, что все функции будут расположены в контроллере приложения. Скопируйте и добавьте после закрывающегося тега параграфа с кнопкой <p><button ng-click="remove()">Удалить гостя button>p> следующий код: <script>         var app = angular.module('firsApp', []);         app.controller('firstController', function($scope) {             $scope.listOfGests = [{guestName:'Я любимый', come:false}];             var countOfGuests = 1;             $scope.addGuest = function() {                 $scope.listOfGests.push({guestName:$scope.guestsInput, come:false});                 $scope.guestsInput = "";                 countOfGuests++;                 checkNumberOfGuests();             };             $scope.remove = function() {                 var oldGuests = $scope.listOfGests;                 $scope.listOfGests = [];                 angular.forEach(oldGuests, function(guest) {                     if (!guest.come) $scope.listOfGests.push(guest);                     countOfGuests--;                 });                 checkNumberOfGuests()             };             function checkNumberOfGuests(){                 if(countOfGuests <= 2){                     alert("Маленькая вечеринка тоже не плохо! Не печалься! Лучших друзей не бывает много!");                 }else if(countOfGuests >= 9){                     alert("Праздник?! ВЕЧЕРИНИЩЕ!");                 }else{                     alert("Узкий круг самых близких, это всегда хорошо!");                 }             } script> В данном коде у нас есть три функции: добавление и удаление гостя и проверка количества гостей. В функции добавления мы берем введенные данные guestsInput и добавляем их в лист listOfGests. Устанавливаем значение чекбокса в false (в нашем случае, это значит, что человек придет / если значение true, то есть галочка стоит - значит не придет), после чего очищаем поле ввода. Далее увеличиваем счетчик гостей и вызываем функцию проверки их количества. В функции удаления мы берем список гостей listOfGests и проверяем значение чекбокса каждого гостя, определяя, кто придет, а кто нет. Удаляем тех, кто отмечен галочкой (не пойдет) и уменьшаем счетчик элементов. Функция проверки количества гостей очень проста, поэтому подробнее мы ее разбирать не будем. Давайте откроем пример в браузере и поработаем с ним: Добавим несколько гостей: С изменением количества гостей содержимое оповещений будет меняться. Когда вы добавите больше 9 друзей, тогда увидите такое оповещение: Поздравляем, вот Вы и создали свое первое одностраничное приложение с помощью AngularJS!

Введение Давайте рассмотрим практику написания AngularJS приложения. Приведенные ниже примеры помогут вам писать приложение правильно, чисто и более обдуманно. С помощью применения данной практики вы разработаете приложение, которое будет разделено на блоки, что в конечном итоге поможет строить правильную архитектуру приложения. Итак, начнем. 1) Создавая новое приложение, старайтесь разделять модуль, контроллер, фабрику, вынося их в отдельные файлы. Этот прием имеет ряд приимуществ: улучшается читаемость приложения улучшается рефакторинг приложения легче производить дебаггинг приложения //плохая практика angular        .module('app', ['ngRoute'])        .controller('myController', myController)        .factory('myFactory', myFactory); function myController() { }; function myFactory() { }; //рекомендуется //myapp.module.js – файл модуля angular        .module('app', ['ngRoute']); //mycontroller.js – файл контроллера angular .module('app') .controller('myController', myController); function myController() { }; //myfactory.js – файл фабрики angular        .module('app')        .factory('myFactory', myFactory); function myFactory() { }; 2) Старайтесь оборачивать код в самовызывающиеся функции. Это позволяет : сохранить переменные от глобального объекта scope предотвратить перетирание глобальных переменных (т.к. они локальны) при минификации кода помогает избежать путаницы переменных //плохая практика angular        .module('app')        .factory('myfactory', myfactory); function myfactory() { }; //рекомендуется (function () {     'use strict';     angular         .module('app')         .factory('myfactory', myfactory);     function myfactory() { }; })(); 3) Старайтесь придерживаться иерархии именования. Это поможет правильно структурировать приложение, что в итоге приведет к правильной архитектуре программы. Избегайте создания модуля через переменную и используйте цепочный синтаксис (в виде цепочки) //плохая практика var app = angular.module('app', [        'ngAnimate',        'ngCookies',        'firebase' ]); //рекомендуется angular        .module('app', [        'ngAnimate',        'ngCookies',        'firebase' ]); 4) Используйте именованные функции. Код становится более читабельным и куда лучше тестируется.  //плохая практика angular        .module('app')        .controller('mycontroller', function () { }); //рекомендуется (обратите внимание на контроллер он вынесен в отдельный файл //от модуля) //myapp.module.js – файл модуля angular        .module('app', ['ngRoute']); //mycontroller.js – файл контроллера angular .module('app') .controller('myController', myController); function myController() { }; 5) Используйте controller as нотацию вместо просто controller. Она более читабельна, помогает не запутаться в коде      //плохая практика     <div ng-controller=”myController”>{{title}}div>     //используем     <div ng-controller=”myController as mycontroller”>{{mycontroller.name}}div> 6) Используйте слово vm(ViewModel) внутри контроллера вместо ключевого слова this. Это поможет избежать подмены контекста внутри функции.  //антипаттерн function mycontroller () {        this.name = {};        this.deleteSome = function () {}; }; //паттерн function mycontroller () {        var vm =  this;        vm.name = {};        vm.deleteSome = function () {}; }; Это лишь базовые приемы, которые вы можете использовать в своей практике. Они помогут вам избежать некоторых проблем в вашей роботе и сделать код вашего приложения чище и понятнее. Желаю вам хорошего кода и светлых идей.

Введение HTML5 – последняя версия языка разметки. У HTML5 есть семантическая структура. В пятой версии языка ввели определенные средства для управления – они дают возможность сэкономить Ваше время при разработке веб-сайтов. В этой статье мы рассмотрим упомянутые средства управления, а также функции в HTML5. Прежде чем начать, необходимо установить Visual Studio. Мы можем включить опцию HTML в целевом разделе: Tools -> Options -> Text Editor -> HTML. Разметка HTML5          Объявление DOCTYPE: <!DOCTYPE html> Объявление кодировки символов: <meta charset="utf-8" /> <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>Sibeesh Passion wish you a happy new yeartitle> head> <body> Welcome to Sibeesh Passion body> html> Структура HTML5 Как уже говорилось, у HTML5 есть семантическая структура. Это уменьшает усилия UI-разработчика. На изображении объясняется эта структура. До применения HTML5: После: Исходя из рисунка, понятно, что в HTML5 доступны такие элементы: Header Nav Section Aside Article Footer Добавление собственных элементов Вы можете создать собственный элемент, используя стили. Разметка должна выглядеть таким образом: <!DOCTYPE html> <html> <head>     <title>Your own element title>     <script>document.createElement("yourelement")script>     <style>         yourelement {             display: block;         }     style> head> <body>     <div>         Normal element     div>     <yourelement>My elementyourelement> body> html> Вы создали новый элемент «yourelement». Новый синтаксис Атрибута В HTML5 введен новый синтаксис атрибута: Empty Unquoted Double Quoted Single Quoted Можно присвоить текстовое значение тега input type таким образом:   <input type="text" value="Sibeesh" disabled>     <input type="text" value=Sibeesh>     <input type="text" value="Sibeesh">     <input type="text" value=’Sibeesh’> Примените CSS Так же, как  к обычным элементам HTML, так и к новым семантическим элементам можно применять стили. footer{border:1px solid;} Предыдущий стиль будет применен ко всем footer, доступным на странице. Не рекомендуется использовать верхний регистр (Footer, FOOTER) в названии элементов. Обзор элемента Canvas Если Вы хотите создать определённый графический контент, элемент Canvas,  то Вам нужно: Объявление Canvas     <canvas id="canvasExample" width="200" height="100"             style="border:1px solid #ccc;">         Bad Luck, It seems your browser won't support :(     canvas> Реализация Canvas var c = document.getElementById("canvasExample"); //Get the element var ctx = c.getContext("2d"); // Get the context for the element var grd = ctx.createLinearGradient(0, 0, 200, 0); //Create the line grd.addColorStop(0, "blue"); // Apply the colors grd.addColorStop(1, "white"); // Apply the colors ctx.fillStyle = grd; //apply the style ctx.fillRect(10, 10, 150, 80); // Fill Здесь мы применили градиент к canvasExample. Введение в SVG Масштабируемая векторная графика (Scalable Vector Graphics) – графика для web типа canvas. Одно из различий между canvas и SVG  то, что SVG поддерживает обработчик событий, а элементы canvas – нет. Объявление SVG     <canvas id="canvasExample" width="200" height="100"             style="border:1px solid #ccc;">         Bad Luck, It seems your browser won't support :(     canvas> Полный вариант HTML-документа: <!DOCTYPE html> <html> <body>     <table style="border:1px solid #ccc;">         <tr style="border:1px solid #ccc;">             <td style="border:1px solid #ccc;">                 <h2 style="text-align:center;">Canvash2>                 <canvas id="canvasExample" width="200" height="100"                         style="border:1px solid #ccc;">                     Bad Luck, It seems your browser won't support :(                 canvas>             td>             <td style="border:1px solid #ccc;">                 <h2 style="text-align:center;">SVGh2>                 <svg width="200" height="200">                     <circle cx="100" cy="100" r="50"                             stroke="green" stroke-width="4" fill="yellow" />                     Bad Luck, It seems your browser won't support :(                 svg>             td>         tr>     table>     <script>         var c = document.getElementById("canvasExample"); //Get the element         var cctx = c.getContext("2d"); // Get the context for the element         var grd = ctx.createLinearGradient(0, 0, 200, 0); //Create the line         grd.addColorStop(0, "blue"); // Apply the colors         grd.addColorStop(1, "white"); // Apply the colors         ctx.fillStyle = grd; //apply the style         ctx.fillRect(10, 10, 150, 80); // Fill     script> body> html> Источник: http://www.c-sharpcorner.com/UploadFile/65794e/html-5-elements-in-a-look-part-1/         http://www.c-sharpcorner.com/UploadFile/65794e/html-5-elements-in-a-look-part-2/

Введение Приветствую всех профессионалов или просто любителей великого дела – продвижения сайтов. Я постараюсь не затрагивать того, о чем пестрят страницы многих блогов и порталов и перетирать уже и так “до дыр” затертые темы относительно современного SEO. Работая руководителем интернет-рекламы в компании Abweb, мне с командой технических специалистов удалось накопить значительный бекграунд, который позволит поделиться прикольными “фишками” с Вами. По заголовку данной статьи на меня может сразу политься поток критики по поводу понятия “правильное SEO”. Ребята, расслабтесь. Я расскажу об 11 золотых истинах правильного SEO относительно клиента и самому подходу к рабочемму процессу, которые мы составили с коллегами на основании реальных событий и опыта. Поэтому, данный материал будет полезен как для любителей своего дела, так и для клиентов, которые сотрудничают или собираются сотрудничать с интернет-агентством. Прописные истины 2015. Какие они у нас? 1. Начнем с глобального. SEO – это специфическая услуга, в которой априори не может быть гарантий. Какого бы уровня  не был специалист - Senior, Middle или Junior, никто из них одинаково не сможет дать 100% гарантии, но вероятность успешного результата все же есть. О гарантиях есть официальный материал Google, где указано, что гарантий даже стоит остерегаться! Пусть этот аргумент станет палочкой-выручалочкой для тех продажников, от которых клиенты в договоре просят прописывать гарантии или возврат денег. 2. Поисковое продвижение не бывает быстрым. Да, иногда удается достигнуть очень быстрого результата, но на это влияет ряд факторов (трастовость ресурса, возраст, текущая история продвижения, качество самого сайта, ниша). Но, зачастую, результата нужно ждать 6 месяцев, а то и больше. Донесите до клиента, что Google -  искусственный интеллект, который не доверяет первичным манипуляциям. И при дальнейшей модификации алгоритмов эти сроки аж никак не будут становиться меньше. 3. Качественно составленная семантика – первый шаг к успеху. Грамотно  проработанное семантическое ядро - это действительно залог хорошего результата. Тут важны 2 аспекта: правильно подобрать запросы (не продвигать те ключи, которые не подходят тематике или типажу сайта) и корректно выбрать посадочные страницы под них. Например, часто возникает ситуация, когда основные запросы “садят” на страницу категории, хотя под них идеально подходит главная страница, которая продвигается значительно легче. Поэтому, это очень ответственный этап! Чтобы сделать это максимально правильно, ориентируйтесь на тех, кто в ТОПе по продвигаемым ключевым словам, проводите анализ конкурентов. Просмотрите, какие целевые страницы они выбирают для продвижения и берите за базис их стратегию. 4. Внутренняя и внешняя оптимизация – неразрывные звенья. Невозможно получить ТОПы, выполнив лишь 1 фронт работ. Нужно хорошо оптимизировать сайт, устранить все ошибки, написать и разместить тексты, составить и разместить оптимизированные мета-теги, а потом выполнять работы по наращиванию ссылочной массы.  Часто клиенты пытаются навязывать свое мнение, что один из этапов нужно пропустить (явно для того, чтобы сократить бюджет). Но это неверно. Только такой симбиоз даст что-то толковое! 5. Эра контента наступила. И это факт. Поисковые машины научились определять полезность контента. Есть сторонники OLDSCHOOL-теорий, что тексты никто не читает и главное, чтобы плотность ключевика там была процентов 5 не меньше. Это эра динозавров. Нами лично было проведено много экспериментов, которые дали положительные результаты. Страница, которая содержит только текст с определенной оптимизацией под ключевики, ранжируется в поисковых системах хуже, чем структурированная и реально полезная страница. Такая страница должна содержать изображения, видеоматериалы, маркировочные списки и, желательно, конкретные предложения и прайсы. Все это выявляет большой интерес и важность для пользователя, попавшего на Вашу посадочную страницу. Пример удачной страницы одного из наших довольных клиентов: Тут не просто голый текст, а реально важная информация для клиента, которая и делает контент полезным. 6. Вечные ссылки рулят. Вечные ссылки – это такие ссылки, которые оплачиваются разово, которые размещаются в теле постового материала или тематической статьи и “живут” на площадке столько, сколько существует сама площадка. Такие ссылки выглядят очень естественно (что несомненно нравится клиентам) и хорошо воспринимаются поисковыми системами. И не нужно переживать, что ссылка будет мигать или будет снята за неуплату аренды, как это было в далеких 2000-ых. Единственный минус – дороговизна такой ссылки, но зато результат того стоит. 7. Стремительная положительная динамика от внутренней оптимизации видна в течении 1-ого месяца, а от продвижения ссылочным через 2-3.Часто клиенты спрашивают: “После внутренней оптимизации сайта произошел стремительный рост позиций, а после закупки ссылок мы топчемся на месте уже 2-й месяц?”. Очень типичная ситуация, на которую есть железный аргумент. Индексация сайта и индексация внешних ссылок на сайт – это два разных процесса, которые длятся по-разному. Для индексации ссылки и учета ее на ранжирование продвигаемого сайта поисковик проводит несколько апдейтов (2-3 месяца), а для учета всех изменений по сайту (текстов, метатегов) ему может быть достаточно 1 посещения Гугл-ботом (1-3 недели). Вот почему происходит такая разница в динамике по позициям на разных этапах, и успокойте заказчика. 8. Принудительная переиндексация целевых страниц помогает сдвинуть динамику.  В инструменте Google Webmaster Tools есть инструмент, который позволяет отправлять страницы на целевую переиндексацию, чтобы привлечь быстроробота на страницу.  В основном, этот прием применяют для того, чтобы робот поисковика быстрее учел внесенные изменения в текст страницы или метатеги. Но, как показывает практика, если Вы долго не видите положительной динамики по позициям по продвигаемым страницам, можно попробовать отправить их через данный инструмент. Очень часто помогает сдвинуть позиции с мертвой точки. Невероятно, но факт! 9. Прозрачное SEO – это подушка безопасности.   Это так, ибо зачастую данная услуга продается без гарантий. Максимальная прозрачность и этапность работ, открытый бюджет (Open Budget), а также промежуточная и ежемесячная отчетность поможет сгладить все конфликтные “углы”. Заказчик регулярно будет видеть перечень работ и какие манипуляции проводятся. Также, в конечном итоге даже при возникновении конфликтной ситуации можно попытаться вывернуть ее в то русло, что оплачена, в первую очередь, проведенная работа, а не ТОПовые позиции, которых ждет клиент и деньги не выброшены зря. 10. Для построения чего-то серьезного нужна не менее серьезная структура.Часто клиенты ошибочно считают, что весь цикл коммуникаций и все работы должно проводить то лицо, которое заключало с ними договор и продавало услугу, критикуя при этом структуру построения коммуникаций. Это ошибочно! (исключение - фриланс) Любая уважающая себя компания понимает и выстраивает свою иерархию по должностям и отделам, и в такой структуре один человек не может выполнять все процессы. В интернет-агентствах зачастую структура состоит из sales менеджеров, аккаунт-менеджеров, технических специалистов и руководителей. И это правильно. Каждый должен выполнять определенный круг задач с максимальным качеством. Поэтому меня возмущают вакансии типа совмещающие в себе этакий микс с разных направлений и отраслей. Это важно доносить и клиентам. 11. Эксперименты - двигатель прогресса. Пускай и говорят, что работа сеошников во многом похожа на тыканье пальцем в небо. Зато, как приятно достигать неожиданного положительного результата при проведении очередного эксперимента. Признаюсь честно, мы точечно тестируем множество тактик и стратегий (те же арендные ссылки с Sape, ссылочные прогоны или переспам в метатегах), чтобы понимать четкую картину того, что пишут на большинстве блогов и можем ли мы с этой информацией согласиться или ее опровергнуть. Для нас эксперименты – это двигатели прогресса. Экспериментируйте и Вы! Надеюсь, что этот дебютный материал будет полезным тем, кто только начинает свой путь в SEO или уже успешно по нему шагает. Ждем комментов ;)

Прежде всего стоит освежить память и немного повторить основы. JavaScript – объектно-ориентированный язык программирования. Чаще всего в сценариях JS вы будете встречать объекты. Элементарные типы данных JS: числа строки булевые(true/false) null undefined Объект в JS – это коллекция пар ключ/значение. Если же свойством объекта выступает функция, это свойство называют – методом. Разновидности объектов в JS : Собственные объекты: встроенные (Array, Date) пользовательские (var b = {};)      2. Объекты окружения: window объекты DOM Прототип: Для использования наследования обычно применяют прототип. Что такое прототип – это объект. Каждая создаваемая функция получает свойство prototype, который ссылается на новый пустой объект. Что такое Шаблон : это повторимая архитектурная конструкция, представляющая собой решение проблемы проектирования у часто возникающего контекста. решение типичной задачи(эффективный прием). Что делают шаблоны: помогают писать более еффективный программный код, используя наработанные приемы. помогают абстрактно мыслить программисту, не погружаясь в детали, пока этого не требует ситуация. упрощает общение разработчиков, упоминание какого-либо приема сразу вносит ясность. Типы шаблонов: шаблоны проектирования шаблоны кодирования антишаблоны Рассмотрим основные приемы написания качественного кода на JS. Правила написания качественного кода: удобочитаемость (вы или человек, который будет после вас читать код, должен легко и быстро его понимать) документация (опять же, для понимания написаного вами кода) предсказуемость (опять же, вытекает из первого) непротиворечивость (отдельные составляющие программы не должны противоречить друг другу) Первый прием(шаблон) на пути написания качественного кода  – сведение к минимуму количества глобальных переменных. Стараемся объявлять переменные в теле функций(так как мы помним, что функция есть локальной областью видимости). Любая переменная, объявляемая не в теле другой функции, является свойством глобального объекта window. Почемy же нам стоит избегать глобальных переменных ? Они доступны всему приложению, соответсвенно, могут конфликтовать/перезаписываться. Решение – использование слова var при объявлении переменных.  function mult(x, y) {     //антишаблон - глобальная переменная     res = x * y;     return res; }; function mult(x, y) {     //локальная переменная     var res = x * y;     return res; }; function antiPat() {     // антишаблон - использование нескольких операций присваивания     // переменная res - локальна, переменная glob - глобальна     // потому как присваивание выполняется справа налево     // glob = 5 - в данном случае необъявленная переменная     // операция эквивалентна var res = ( glob = 5 );     var res = glob = 5; }; function antiPat() {     //решение : зарание объявить переменные;     var res, glob;     res = glob = 5; }; Также переменные, объявленные с помощью слова var, не могут быть удалены, используя оператор delete. var global0 = 5; global1 = 10;                            // антишаблон (function () { global_inFunc = 15 }());         // антишаблон //пытаемся удалить delete global0;                                 // false delete global1;                                 // true delete global_inFunc;                           // true //проверяем typeof global0                                  // 'number' typeof global1                                  // 'undefined' typeof global_inFunc                     // 'undefined' В строгом режиме ('use strict';) присвоение значения необъявленной переменной вызовет ошибку. Глобальный объект var global = (function () { return this }()); Получаем доступ к глобальному объекту, потому как ссылка this указывает на глобальный объект. Единственная инструкция var function func () {     var x = 5, y = 10, mult = x * y, someObj = {}, k, l, m;     return … }; У такого приема есть ряд приимуществ: легко найти переменную(они все в одном месте) уменьшает количество логических ошибок уменьшает количество глобальных переменных(так как мы их объявили локально уже) повышает удобочитаемость кода Подъем //антишаблон some = 'global';                  //глобальная переменная function example() {     alert(some);           //undefined     var some = 'local';     alert(some);           //'local' }; example(); Почему так происходит? Потому что в JS интерпретатор проходит по областям видимости на первом этапе обработки кода и собирает объявление переменных фунций и формальных параметров. В локальной области видимости переменная some неопределена (undefined). Она существует как глобальная переменная и как локальная. Такое поведение именуется подъем (hoisting). Второй этап выполнения кода интерпретатором – создание функций-выражений и необъявленных переменных. Циклы for function func (){     var i,  max, sampleArray;     for ( i = 0; max = sampleArray.length; i < max; i++ ) {         //    произвести действия над sampleArray[i]     } }; Используя такой шаблон, значение свойства length будет извлекаться единожды, что увеличит драгоценную скорость работы. var i, sampleArray = []; for (i = sampleArray.length; i--;) {     //    произвести действия над sampleArray[i] }; Считаем итерации обратно от максимального значения к нулю, потому как сравнение с 0 эффективнее, чем сравнение с длиной массива. var sampleArray = [],i = sampleArray.length; while(i--){ //    произвести действия над sampleArray[i]}; Такие изменения будут ощутимы на участках приложения, где необходима максимальная производительность. Циклы for-in Циклы for-in используются для обхода объектов (не массивов – это возможно, но не рекоменуется). var car = {     doors: 4,     wheels: 4,     engine: 1 }; // расширяем функционал // добавляем ко всем объектам метод ride if (typeof Object.prototype.ride === 'undefined') {     Object.prototype.ride = function () { }; }; // Теперь все объекты через прототип имеют доступ к методу ride() // чтобы отбросить метод при перечислении свойств необходим // метод hasOwnProperty() для того, чтобы отфильтровать свойства прототипа var i, hasOwn = Object.prototype.hasOwnProperty; for (i in car) if (hasOwn.call(car, i)) {     console.log(i, ' : ', car[i]); }; Для каждого собственного свойства объекта выполнить кусок кода в фигурных скобках. Расширение prototype Данный шаблон следует использовать очень аккуратно. Даже если вы предупреждаете свою команду в докумментации (что является более предпочтительным и для новой комманды) или устно (недопустимо). If ( typeof Object.prototype.someMethod !== 'function' ) {     Object.prototype.someMethod = function () {         //do something...     }; }; Приведение типов // шаблон var number = 0; if (number === false) {     // не выполнится потому как number это 0, а не false }; // антишаблон if (number == false){ // инструкция выполнится }; Во избежание двузначности старайтесь использовать однозначную трактовку кода. Шаблоны eval(), setInterval(), setTimeout() Старайтесь не использовать в своих сценариях eval(). Функция принимает строку и выполняет её как програмный код. А это уже ставит под удар безопасность приложение, так как eval() выполнит код хакера. Возможно, эта функция понадобится вам во время динамической генерации кода, тогда лучше заменить eval(), как пок­азано ниже: // антишаблон var property = 'name'; alert(eval('obj.' + property)); // лучше заменить на var property = 'name'; alert(obj[property]); Функциям setInterval(), setTimeout() и конструктору  Function() старайтесь не передавать в качестве аргумента строки. По тем же причинам , что и функция eval(). // антишаблон setTimeout( 'someFunc()', 5000); setTimeout( 'someFunc(1, 2, 3)', 5000); // заменить на setTimeout( someFunc(), 5000 ); setTimeout( function(){ someFunc(1, 2, 3); }, 5000); Если по каким-либо причинам вам все-таки приходится применять функцию eval(), оберните её в самовызывающуюся функцию, этот шаблон поможет вам создать локальную область видимости, предотвратит перетирание переменных и предотвратит создание глобальных переменных. Также конструктор Function() отличается от  eval() тем, что ему доступна лишь глобальная область видимости. (function () {     var local = 1;     eval('local = 3; console.log(local)');      // результат 3     console.log(local);                         // результат 3 }()); (function () {     var local = 1;     Function('console.log(typeof local);')();// результат undefined }()); Применяйте приведенные в этой статье шаблоны, эксперементируйте. Старайтесь создавать код, понятный и другим разработчикам. Одно из самых главных приоритетов при написании кода- это простота. Как говорится в знаменитой пословице: “Все гениальное просто.” На этом пока все. Желаю всем красивого кода. Всем спасибо!

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