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

Введение  CSS3 произвел революцию в мире веб разработки, поскольку он принес много новых функциональных возможностей. Эта технология продолжает развиваться и внедрять новые возможности. В Новом, 2015 году будут добавляться новые свойства, про некоторые из них мы расскажем в этой статье. CSS - маски В Webkit браузерах CSS-маски функционируют уже давно. В ноябре 2014 года была опубликована новая спецификация CSS масок, теперь мы ждем, когда поддержку данного свойства получат все браузеры. Что такое маска? Проще говоря, маской можно назвать изображение с белой или черной фигурой и прозрачным фоном. Применяя маску на изображение или элемент, мы получим маскированное изображение. Пример:  Маски можно использовать сейчас, но, к сожалению, только в браузерах Webkit отображение будет корректным. Использование масок в Webkit На движке Webkit маски выполняются очень легко, просто используйте тег mask. .element {      -webkit-mask: url('mask.png'); } Давайте попробуем создать пример. Вот наше изображение маски:  Накладывать маску будем на эту фотографию: Теперь добавим немного кода:  class="element">     src="image.jpeg" alt="" /> type="text/css"> .element {    width: 500px;    overflow: hidden; } .element img {     -webkit-mask: url(mask-image.png); } В результате мы получим вот такое изображение:  Кроме того, можно использовать свойства. Например, Вы можете установить позицию: .element img {     -webkit-mask: url(mask-image.png) 30% 30% repeat-x border-box;         /* .. тоже самое что и.. */     -webkit-mask-image: url(mask-image.png);     -webkit-mask-position: 30% 30%;     -webkit-mask-repeat: repeat-x;     -webkit-mask-box-clip: border-box;         /* Так же можно указать и размер! */     -webkit-mask-size: 30% 30%; }   CSS-исключения CSS-исключения (CSS Exclusions) - очень мощная функция, позволяющая изменить отображение контента на странице. Используя только одно свойство, можно поменять весь стиль страницы, это очень похоже на редактирование страницы в редакторе WYSIWYG. Давайте посмотрим на самое интересное свойство - “wrap-flow”. Wrap-flow Wrap-flow позволяет определить, какое количество элементов влияет на другие, когда они поверх остальных. Зачастую блоки перекрываются. С помощью wrap-flow все элементы адаптируются под верхний элемент на странице.  Wrap-flow имеет несколько настроек: auto: обычное состояние, ни один из элементов не регулируется start: все, что после элемента - удаляется end: удаляется все, что до элемента  both: удаляется контент под объектом minimum: удаляется сторона с наибольшим количеством контента maximum: удаляется сторона с наименьшим количеством контента clear: c двух сторон от объекта всё содержимое удаляется Диаграмма для помощи: Композиции и модели смешивания (Composition and Blending) Режимы смешивания в CSS стали частью официальной спецификации W3C. Это значит, что Вы можете выполнять затемнения основы (color burn) через CSS. Данная спецификация новая, так что возможны изменения прежде, чем она попадет в другие браузеры. У нее такой принцип работы: есть 2 изображения, они накладываются одно на другое с помощью абсолютного позиционирования. Это будет выглядеть так: <div class="blend">    <img src="duck.gif" alt="Duck" class="duck" width="500" height="500" style="position: absolute; top: 0; left: 0" />    <img src="penguin.gif" alt="Penguin" class="penguin" width="500" height="500" style="position: absolute; top: 0; left: 0" /> div> Пример CSS кода:  .blend {      position: relative; } .blend .duck {         mix-blend-mode: overlay; } В целом вся конструкция выглядит так:  Если Вам интересно, то можете попробовать режимы наложения прямо сейчас. Для этого Вам необходимо скачать Adobe’s experimental webkit browser Источник: http://www.inserthtml.com/2013/01/future-css3/ 

Введення  Використовуючи форми в HTML5, Ви часто використовуєте методи перевірки (валідації) даних, адже їх ігнорування може призвести: до втрат користувачів, до сміття в базі даних або до взлому сайту. Історично склалося, що створення форм із гарною валідацією – складне завдання. В HTML5 є інструменти оброблення даних для форм, з їх допомогою можна проводити валідацію, що включає в себе спеціальні атрибути і нові типи вхідних даних. Давайте розберемо їх детальніше. 1. Спеціалізовані типи вхідних даних HTML5 містить кілька нових типів введення. Вони використовуються для створення поля введення, що приймає тільки певні типи даних. Нові типи вхідних даних виглядають наступним чином: color date datetime datetime-local email month number range search tel time url week Приклад: <input type="email"/> Якщо браузер не підтримує даний тип введення, поле поводитиметься як звичайне поле введення тексту. 2. Обов’язкові поля для заповнення  Просто додавши атрибут "required"до <input>, <select> або <textarea>, Ви кажете браузеру, що значення має бути заповнене. <input type="checkbox" name="terms" required > 3. Ліміти Ми можемо встановити деякі обмеження та ліміти, наприклад, максимальні та мінімальні значення для числових полів. Щоб обмежити довжину поля введення, треба використовувати атрибут "maxlength". <input type="text" name="name" required  maxlength="15"> Поле <input type="number" /> використовує атрибути "max" та "min", щоб створити діапазон можливо-допустимих значень (у прикладі мінімально допустимий вік – 18). <input type="number" name="age" min="18" required> 4. Стилізування CSS3 псевдо-класи дозволяють прикрасити форму незалежно від її стану. Це: :valid :invalid :required :optional :in-range :out-of-range :read-only :read-write У прикладі ми об'єднали селектори "valid" та "invalid" із псевдо-класом "focus" для зафарбовування поля форми в червоний або зелений, залежно від того, що робить користувач: вибирає або друкує. input:focus:invalid, textarea:focus:invalid{     border:solid 2px #F5192F; } input:focus:valid, textarea:focus:valid{     border:solid 2px #18E109;     background-color:#fff; } 5. Підказки Ви помічали спливаюче вікно з підказкою під час відправлення неправильно заповненої форми? Встановивши атрибут "title" для поля введення, можна додати підказки, що вказують на помилки при порушенні тих чи інших правил валідації. Зверніть увагу, що різні браузери відображають підказки по-різному. У браузері Chrome значення назви атрибуту буде відображатися дрібним шрифтом, під основним повідомленням про помилку. У Firefox інша проблема: використовуючи атрибут “pattern” після того, як він береться в якості шаблону, Ви не отримаєте спливаючу підказку.  <input type="text" name="name" title="Будь ласка, введіть ім’я користувача."> 6. Шаблони Атрибут "pattern" дозволяє розробникам задавати регулярний вираз, який браузер порівнює з даними введення, перш ніж відправити форму заявки. Ось як це можна використати: <input type="email" name="email" required pattern="^\S+@\S+\.\S+$" title="example@mail.com"> З функцією фільтрування вхідних даних ми можемо приймати тільки повну e-mail адресу. Джерело: http://tutorialzine.com/2014/12/quick-tip-easy-form-validation-with-html5/

Введение  Подошел к концу 2014 год и самое время спросить себя: «Какие тенденции будут преобладать в сфере веб-разработки в 2015 году?». Представляем вашему вниманию подборку трендов, которые, по нашему мнению, будут популярны в следующем году. 1. Адаптивный дизайн Вместе с ростом популярности на планшеты начал расти спрос на адаптивный дизайн, сегодня это - неотъемлемая часть любого сайта. С помощью “Responsive Design” пользователь сможет спокойно просматривать Ваш сайт на любом девайсе, будь то PC или мобильный телефон. Зачем Вам адаптивный дизайн? Ответ простой, сейчас все больше пользователей просматривают новости через разные устройства с разным расширением экрана, поэтому выбор ресурса напрямую зависит от удобства его использования на всех носителях. Главный критерий выбора – ширина контента не должна превышать ширину экрана, иначе пользователю будет неудобно воспринимать информацию и он к вам больше не вернется.  2. Плоский дизайн (Flat Design) Плоский дизайн начал набирать свою популярность после релиза Windows 8, благодаря компании Microsoft и ее Metro-стилю. Концепция плоского дизайна заключается в том, что двухмерные изображения не перегружают восприятие пользователя и уменьшают загруженность ресурса. В плоском дизайне отсутствуют лишние эффекты: тени, блики и градиенты, в противовес им выдвигаются яркие цветовые решения. 3. Карточный дизайн Карточный дизайн — это способ подачи контента на страницах сайта. Каждая карточка содержит в себе определенную информацию, это дает ресурсу возможность концентрировать внимание пользователя и легко группировать содержимое сайта.  Главное преимущество данного типа дизайна — это легкость взаимодействия пользователя с Вашим сайтом, ведь карточки легко можно опубликовать на своей странице в социальных сетях, сохранить в избранное или прокомментировать. Первопроходцами карточного дизайна считаются  Pinterest и Google+. Благодаря своей отзывчивости и адаптивности все больше сайтов переходит на карточный дизайн. 4. Фоновые изображения и видео За последнее время все большую популярность набирают ресурсы с широкоформатным изображением  или видео на фоне,  с небольшой цитатой поверх него. Этот прием идеально подходит для сайта-портфолио или сайта-визитки. 5. Рисованные иллюстрации и шрифты Сайты с рисованной типографикой или иллюстрациями подкупают своей неповторимостью. Все больше сайтов начали использовать в своем дизайне элементы, разработанные вручную, именно под определенный проект. Эти детали делают сайт уникальным и запоминающимся, пользователю приятней пользоваться таким сайтом, он захочет рассказать о нем другу и обязательно вернется сам. 6. SVG иконки и анимации SVG — это специальный язык разметки векторной графики, который разрабатывается W3C с 1999 года. Возможность создавать SVG изображения доступна в большинстве векторных редакторов: Illustrator, Corel Draw или Sketch. SVG-графика часто используется для создания иконок, они выглядят качественней и легко адаптируются под разные расширения экрана. И напоследок, с помощью SVG можно создавать анимированные иконки.  Источник: http://www.sevensignature.com/blog/articles/top-10-sign-things-come-2015-web-design-trends/