Введение Вам приходилось возвращаться к фрагменту кода, написанному год или месяц назад? Каково это было?  Это было просто, или приходилось вникать в код исходя из заметок? Если у Вас не получается быстро разобраться в коде и Вы задаете себе вопрос: «Что же я тогда имел ввиду?» – Вы определенно делаете что-то не так. Скорее всего, Ваш код работает правильно. И Вы знали его вдоль и поперек, когда над ним работали. Почему же Вы не можете его вспомнить сейчас? Быть может, он не был написан достаточно доступно и не соответствовал стандартам машинного кода? В этой статье Вы найдете полезную информацию о том, как научиться писать доступный не только для себя, но и для остальных разработчиков код. Пример использования стандарта оформления кода Рассмотрим это на следующем примере метода в 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/ 

Введение Продолжая серию статей о реализации анимации, которая реализуется без знаний Javascript, стоит отметить, что использование 2D зачастую не производит на пользователя должного впечатления. Несомненно, 2D-преобразования, реализованные с использованием каскадных таблиц стилей CSS3, освобождают нас от написания нескольких строк JavaScript кода, и тем более от подключения разного рода фреймворков. Но нельзя того же сказать и про 3D-преобразования, которые также реализуются без скриптов, но в то же время обеспечивают ощущение объемности объектов на странице, придавая им 3-х мерности. К тому же, на сегодняшний день большинство браузеров актуальных версий поддерживают эти эффекты. Перед тем, как приступить к практическим примерам, стоит лишний раз упомянуть о перспективе, поскольку она является ключевой составляющей, когда дело доходит до 3D-эффектов. Дело в том, что, благодаря стереоскопическому зрению, человек способен различать и воспринимать формы, размеры и расстояние до предметов. Поэтому для изображения объемных тел на плоскости, с учетом их пространственной структуры и отдаленности некоторых частей от зрителя, и приняли специальную технику изображения, названную перспективой. Иначе говоря, если в правильной мере обеспечить изобразительное искажения пропорций и форм реальных тел, можно достичь реалистичного объемного изображения. Самым простым примером могут быть две прямые, которые идут от пользователя и сходятся в так называемой точке схода – подобный эффект Вы наблюдаете, когда смотрите на рельсы, которые удаляясь от Вас к горизонту, сходятся в одну точку. Так, используя свойство transform вместе с функциональной аннотацией perspective, можно добиться объемности визуального эффекта. <head>     <title>title>     <style>         div {             width: 400px;             height: 400px;             margin: 100px;             float:left;             background-color: ActiveCaption;         }         #clear:hover {             transform: rotateY(45deg);             transition: 3s;         }         #perspective:hover {             transform: perspective(500px) rotateY(45deg);             transition: 3s;         }     style> head> <body>     <div id="clear">div>     <div id="perspective">div> body> Кроме того, стоит помнить, что вы можете комбинировать направления поворотов, обеспечивая своего рода несколько степеней свободы. <head>     <title>title>     <style>         #id1 {             margin: 100px;             transition: 3s;         }         #id1:hover {             transform: rotateY(45deg) rotateX(45deg);             transition: 3s;         }         #id2 {             margin: 100px auto;             transition: 3s;         }         #id2:hover {             transform: perspective(400px) rotateY(45deg) rotateX(45deg);             transition: 3s;         }     style> head> <body>     <img id="id1" src="cloud.png" />     <img id="id2" src="cloud.png" /> body>   С помощью несложных манипуляций вы сможете достичь интересных эффектов: <head>     <title>title>     <style>         #overlay {             margin: 100px auto;             width: 150px;             height: 150px;             background: gold;             border-radius: 100%;             border: 10px double #794103;             box-shadow: 0 0 15px #808080;         }             #overlay:hover {                 background: #794103;                 border: 10px double gold;             }             #overlay:hover #inner {                 width: 130px;                 height: 130px;                 border-radius: 100%;                 background-color: #794103;                 border: 3px dashed gold;                 transform: rotateX( 180deg );             }         #inner {             width: 130px;             height: 130px;             margin: 7px;             border-radius: 100%;             background-color: gold;             border: 3px dashed #794103;             transition: all 1s ease-out;         }                style> head> <body>     <div id="overlay">         <div id="inner">div>     div> body>   Трехмерные переходы, безусловно, изменят правила игры и дадут нам, веб-разработчикам, несомненно, лучшие возможности делать плавную анимацию, не прибегая к Flash. В этой статье мы познакомились лишь с частью возможностей Transform Properties. Сами по себе они не могут служить универсальным решением, но, когда мы начинаем трансформировать элементы вокруг с помощью свойства transition, начинается самое интересное. Но с этим свойством мы детальней познакомимся с следующей статье.

Введение Чем больше браузеров начинает поддерживать CSS3, тем больше веб-разработчиков начинает использовать некоторые интересные возможности данной технологии. А именно, совмещая работу CSS3 в связке с HTML5 и JavaScript, реализовывать разного рода графические эффекты. В итоге и появилось сленговое название для этих подходов - «Flash-killer». В серии статей рассмотрим основные дополнения к CSS3, познакомимся с простейшими 2D и 3D преобразованиями. Свойства CSS3 – Transform являются, пожалуй, наиболее популярными преобразованиями, которые позволяют применять векторные изменения к HTML элементам, расположенным на странице. Вы сможете контролировать наклон, масштабирование и поворот любого элемента на web-странице. Стоит отметить, что подобные эффекты предпочтительно применять исключительно к изображениям и другим графическим элементам, которые не содержат текстовой информации, поскольку искажение текста существенно снижает его читаемость. Итак, познакомимся с основными функциями свойства transform: 1. Skew отвечает за наклон элемента, может принимать два параметра. Первый отвечает за ось X, другой за ось Y, иначе говоря, наклоны по горизонтали или вертикали.    <head>     <title>title>     <style>         div {             width: 400px;             height: 200px;             background-color: crimson;             margin:100px;             font-size:50px;             color: white;         }         #skew1 {             transform: skew(30deg);         }         #skew2 {             transform: skew(-30deg);         }         #skew3 {             transform: skew(10deg, 10deg);         }         #skew4 {             transform: skewX(10deg);             transform: skewY(-10deg);         }     style> head> <body>     <div id="clear">Example Textdiv>     <div id="skew1">Example Text 1div>     <div id="skew2">Example Text 2div>     <div id="skew3">Example Text 3div>     <div id="skew4">Example Text 4div> body>   2. Scale отвечает за масштабирование элемента по горизонтали и вертикали. Также используется и в частных случаях как ScaleX и ScaleY. <head>     <title>title>     <style>         div {             width: 400px;             height: 200px;             background-color: ActiveCaption;             margin: 150px;             font-size: 50px;             color: white;             transform: scale(1)         }         #scale {             transform: scale(1.5);         }          #scaleX {             transform: scaleX(1.5);         }           #scaleY {             transform: scaleY(1.7);         }      style> head> <body>     <div id="clear">Example Textdiv>     <div id="scale">Example Text 1div>     <div id="scaleX">Example Text 2div>     <div id="scaleY">Example Text 3div> body>   3. Rotate задает поворот элемента относительно точки трансформации, которая в свою очередь задается свойством transform-origin. В простейшем использовании обеспечивает поворот элемента за или против часовой стрелки относительно центра.  <head>     <title>title>     <style>         div {             width: 400px;             height: 200px;             background-color: chocolate;             margin:100px;             font-size:50px;             color: white;         }         #rotateL {             transform: rotate(-10deg);         }         #rotateR {             transform: rotate(10deg);         }      style> head> <body>     <div id="clear">Example Textdiv>     <div id="rotateL">Example Text 1div>     <div id="rotateR">Example Text 2div> body> 4. Translate обеспечивает сдвиг элемента на определенное значение по горизонтали и вертикали. TranslateX  отвечает за смещение по горизонтали, принимая положительное значение, сдвигает вправо, а принимая отрицательное значение, сдвигает влево. TranslateY  действует аналогично по вертикальной направленности. Положительное принятое значение сдвигает элемент вниз, а отрицательное - вверх. <head>     <title>title>     <style>          div {             width: 400px;             height: 200px;             background-color: crimson;             margin:100px;             font-size:50px;             color: white;         }         #translateL {             transform: translateX(-30px);         }         #translateR {             transform: translateX(30px);         }         #translateU {             transform: translateY(-20px);         }         #translateD {             transform: translateY(20px);         }     style> head> <body>     <div id="clear">Example Textdiv>     <div id="translateL">Example Text 1div>     <div id="translateR">Example Text 2div>     <div id="translateU">Example Text 3div>     <div id="translateD">Example Text 4div> body>   Гораздо эффектней подобные трансформации выглядят, когда выполняются при наведении курсора мыши на элемент. В этом же примере вы сможете увидеть, что можно использовать сразу несколько преобразований для вашего элемента на странице. <head>     <title>title>     <style>         #example {             width: 400px;             height: 400px;             background-color: #aa9fd5;             margin: 300px auto;             font-size: 50px;             color: white;         }             #example:hover {                 transform: skew(30deg) scale(1.5,1.5) rotate(40deg) translateY(150px);             }      style> head> <body>     <div id="example">Transformdiv> body>     Стоит помнить, что подобные манипуляции при статическом отображении не обеспечат у пользователя особого восхищения. Для того, чтобы привлечь внимание пользователя, стоит уделить время добавлению динамики на страницу. Об этом мы поговорим в следующих статьях из этого цикла. 

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

Введение Вопрос адаптации сотрудника на новом месте довольно хорошо исследован и, можно сказать, порядком «избит». Но все же стоит уделить внимание некоторым основным шагам, которые стоит совершить, для того чтобы данная процедура прошла как можно приятнее и эффективнее как для сотрудника, так и для рабочего коллектива.  Адаптация нового сотрудника – процедура введения нового специалиста в коллектив компании. Не распространяется на временных сотрудников, на работающих в компании консультантов, на выполняющих разовые работы специалистов. Зачастую данная процедура состоит из нескольких этапов: Вручение новому сотруднику «папки новичка» менеджером по адаптации в первый день выхода на работу после подписания всех корпоративных документов. В данной папке зачастую содержаться ручка, блокнот и книга путеводитель. Путеводитель или краткий справочник содержит в себе информацию о корпоративных правилах, инфраструктуре компании, контактной информации административных отделов. Изучение новым специалистом корпоративных документов, презентаций отделов, краткие руководства о первых шагах ( рекомендуют их сделать в первую рабочую неделю). Получение и настройка учетных записей к почте, внутреннему корпоративному порталу, сетевому хранилищу и т.д. Пройти необходимые адаптационные курсу и тренинги, а также курс по корпоративной безопасности. Подведение итогов адаптационных тренингов и тестирования с менеджером по адаптации новых сотрудников. После этой несложной процедуры во многих компаниях принято знакомить новых специалистов с исполнительными директорами. Зачастую это происходит в форме группового общения, когда набирается группа в 5 и больше сотрудников (до 30, в зависимости от размера компании). Подобные мероприятия призваны в более открытой форме преподнести общее виденье компании, ее цели, приоритеты и проблемы. В более неформальной манере познакомить с политикой компании и заложить фундамент для продуктивных отношений. Часто подобные тренинги проводят все руководители подразделений и отделов, на таких встречах изучается тематика и особенности работы конкретного подразделения. Эти этапы не являются обязательными частями процедуры адаптации и практически не отслеживаются, но имеют не меньше пользы, нежели тренинги по охране труда и корпоративной безопасности. Поскольку формируют здоровые открытые отношения между сотрудниками и способствуют снижению тревожности и неуверенности  у новых сотрудников. После прохождения всех этапов процедуры адаптации менеджер по адаптации проводит заключительную беседу с новым сотрудником, на которой подымаются все вопросы, интересующие сотрудника и проводится планирование процедуры испытательного срока длительностью от 3х до 6ти месяцев. Об особенностях процедуры прохождения и завершения испытательного срока Вы познакомитесь в наших следующих статьях.  

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

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

Введение Используя интернет для поиска информации или для покупок различных товаров, Вы часто можете найти на сайте детали, портящие представление о ресурсе. Такие вещи, как долгая загрузка страницы или куча рекламных объявлений, могут оставить плохие впечатления о сайте. В данной статье представлены пять неприятных вещей, подталкивающих пользователя покинуть Ваш сайт. 1. Большой объем текста на сайте   В среднем пользователи читают около 28% слов на странице. Научитесь вставлять текст только там, где это необходимо. Также попробуйте другие способы передачи информации на странице, например, используйте картинки или видео. Данные альтернативные решения помогут привлечь пользователей на сайт и повысить конверсию. 2. Очень долгая загрузка сайта Наверняка Вы знаете о том, что пользователи хотят получать информацию мгновенно, поэтому, когда они нажимают на ссылку, они хотят, чтобы сайт загрузился мгновенно. 40% пользователей покинут сайт если загрузка займет более 3 секунд. Есть простой способ исправления проблемы - смена хостинг провайдера или оптимизация кода Вашего сайта. 3. Сайт не работает на планшете/мобильном устройстве Люди получают контент с самых различных типов девайсов, имеющих подключение к интернету. Но на самом деле 60% пользователей используют для просмотра контента мобильные устройства. К чему эти цифры? К тому что Ваш сайт должен правильно отображаться на всех типах экранов, начиная от 4’7 дюймового телефона, заканчивая дисплеем Mac. 4. Видео на сайте запускается без ведома пользователя Автозапуск – функция автоматического воспроизведения видео контента, когда пользователь попадает на сайт, или когда он прокручивает страницу до определенной точки. Это типичная тактика для привлечения внимания пользователя. К сожалению, такой вид маркетингового хода может негативно сказаться на количестве Ваших посетителей. 5. Невозможно связаться со службой поддержки Веб сайт должен обязательно иметь двухсторонний метод связи между пользователем и администрацией. Сейчас можно найти очень много сайтов без контактных данных администрации. Решением проблемы является указание контактных данных или же установка виджета, позволяющего легко отправить вопрос службе поддержки. Источник: mashable.com

Введение ADO.NET – это набор классов (фреймворк) для работы с базами данных, а также XML файлами. Аббревиатура ADO расшифровывается как ActiveX Data Objects. Данная технология имеет методы и классы для извлечения и обработки данных. Список .NET приложений, которые используют возможности ADO.NET для различных действий с БД: ASP.NET Web Applications Console Applications Windows Applications. Структуры подсоединения к БД Можно определить два типа архитектуры подключения: Архитектура, подключенная к базе: подсоединена к БД на протяжении всего рабочего времени. Архитектура, не подсоединённая к БД: приложение, автоматически подключается/отключается в процессе работы. Приложения на такой архитектуре используют временные данные, хранящиеся на стороне клиента (DataSet). ADO.NET и его библиотеки классов   На данной диаграмме видны различные типы приложений (Веб приложения, консольные приложения, приложения для Windows и так далее), использующие ADO.NET для подсоединения к БД (SQL Server, Oracle, OleDb, ODBC, XML-файлы и так далее). Классы в ADO.NET Также на предыдущем рисунке мы видим различные классы, а именно: Connection Class Command Class DataReader Class DataAdaptor Class DataSet.Class 1. Connection Class Данные классы применяются в ADO.NET для подсоединения к БД. 2. Command Class Данный класс обеспечивает хранение и выполнение SQL команд. Ниже приведены различные команды, выполняющиеся с помощью данного класса. ExecuteReader: Возвращает данные к клиенту в виде строк. ExecuteNonQuery: Выполняет команду, изменяющую данные в базе данных. ExecuteScalar: Данный класс возвращает только одно значение. ExecuteXMLReader: (Только для классов SqlClient) Получает данные из базы данных SQL Server 2000 с помощью XML-потока. 3. DataReader Class DataReader используется для получения данных. Он используется в сочетании с Command Class для выполнения SQL-запроса. 5. DataSet Class Класс DataSet – сердце ADO.NET, представляющее из себя набор объектов DataTable. Каждый такой объект содержит много объектов DataColumn и DataRow. Подключение ADO.NET к базе данных Для настройки подключения Вы должны быть знакомы со строками подключения (connection strings). ConnectionString – строка переменной (регистр не учитывается). Строки подключения нужны нам для параметра SQLConnection. Данные примеры содержат основные значения, а именно: provider, server, database, userid и password. SQL Аутентификация String constr="server=.;database=institute;user id=rakesh;password=abc@123"; Или:  String constr="data source=.;initial catalog=institute;uid=rakesh;pwd=abc@213"; Windows Аутентификация (Windows Authentication) String constr="server=.;database=institute;trusted_connection=true" Или:  String constr="server=.;initial catalog=institute;integrated security=true" Получение и отображение данных из базы данных Получить и отобразить данные можно по такой схеме: Создайте объект SqlConnection, используя строку подключения. Откройте соединение. Создайте SQLCommand. Укажите тип SQLCommand. Выполните команду (используйте executereader). Получить результат (используйте SqlDataReader). Закройте соединение. Получите результат. Ниже приведен код для подсоединения к SQL:  using System.Web.UI; using System.Web.UI.WebControls; using System.Data.SqlClient; using System.Data.OracleClient; using System.Data.OleDb; using System.Data.Odbc; namespace AdoDemo {     public partial class WebForml : System.Web.UI.Page     {         protected void Page_Load(object sender, EventArgs e)         {             SqlConnection con = new SqlConnection("data source=.; database=Sample; integrated security=SSPI");             SqlCommand cmd = new SqlCommand("Select * from tblProduct", con);             con.Open();             SqlDataReader rdr = cmd.ExecuteReader();             GridView1.DataSource = rdr;             GridView1.DataBind();             con.Close();         }     } } Вы должны использовать System.Data.SqlClient для подключения к SQL. В предыдущем коде мы использовали классы SqlConnection, SqlCommand и SqlDataReader, потому что наше приложение обращалось к SQL Server, а он понимает только SQL. Подключение к базе данных Oracle При подключении к БД Oracle Вам нужно изменить имя некоторых классов, а именно SqlConnection на OracleConnection, SqlCommand на OracleCommand и SqlDataReader на OracleDataReader. Также вначале используйте System.Data.OracleClient. Источник: http://www.c-sharpcorner.com/UploadFile/18fc30/understanding-the-basics-of-ado-net/

Введение  Мы уже писали статью про нововведение в C# 6.0, а сейчас мы хотим более детально рассмотреть одну из функций – инициализацию авто свойств. После выхода C# 5.0 разработчики просили добавить функцию инициализации объявленных свойств. Раньше при создании файла Вам нужно было инициализировать элементы списком, иногда этот список смотрелся очень громоздко. Теперь с появлением C# 6.0 можно убрать некоторые строчки кода, тем самым снизить вероятность ошибок при компилировании и увеличить производительность.  Давайте рассмотрим пример старой модели авто свойства: public string FirstName { get; set; } Сейчас данная модель немного изменилась, теперь можно присвоить значение по умолчанию для авто свойств в C# 6.0, не используя дополнительную строку. Достаточно просто поместить знак равенства в конце строки и задать значение, которое будет использоватся по умолчанию. Пример установки значения по умолчанию при объявлении авто свойства: public class Employee     {     public string FirstName { get; set; } = "itvdn";     public string LastName { get; set; } = "example";     public DateTime JoiningDate { get; set; } = DateTime.Now;     public string Blog { get; set; } = "www.itvdn.com";     } Теперь при создании нового класса для свойств автоматически устанавливаются значения по умолчанию. Небольшой пример: var employee = new Employee(); Console.WriteLine("\n Пользователь: " + Employee.FirstName + " " + Employee.LastName +                   "\n Дата регистрации: " + Employee.JoiningDate +                   "\n Домашняя страница: " + Employee.Blog); Console.ReadLine(); Когда Вы скомпилируете приведенный выше код, Вы увидите, что значения по умолчанию выводятся на экран как повторно неинициализированные свойства. C# 6.0  еще разрабатывается, но уже сейчас с ним можно поработать, скачав Visual Studio 2015. Это, конечно, не полный список нововведений, но по ним видно, что C# - один из самых перспективных языков программирования. Про другие функции мы расскажем Вам в нашей следующей статье. Источник: http://www.kunal-chowdhury.com/2014/11/csharp-6-auto-property.html