Верстка сайтов и веб-программирование привлекают большое количество новичков в мир IT. Это связано с достаточно низким порогом вхождения. Количество желающих стать фронтендщиком с каждым годом увеличивается, вследствии чего растут и требования к кандидатам.  Какие технологии необходимо изучить, чтобы стать FrontEnd разработчиком в 2019 году? Давайте разберемся.    HTML5 & CSS3 HTML5 и CSS3 - это фундаментальные технологии, без знания которых не обойтись любому веб-разработчику. С помощью языка гипертекстовой разметки HTML создается разметка (каркас) каждой интернет-страницы. Затем язык стилей CSS преображает сайт и придает ему привлекательный и эффектный внешний вид.  Также необходимо владеть: кроссбраузерной адаптивной версткой, чтобы уметь создавать сайты под мобильные устройства, планшеты и широкоформатные экраны и для различных браузеров; семантической версткой для повышения качества разметки и улучшения поисковой индексации сайта. Хорошее владение HTML и CSS уже позволяет заниматься версткой сайтов и начать зарабатывать деньги. Именно с этих двух базовых технологий начинается путь к профессии FrontEnd разработчика.   Bootstrap 4 Популярная HTML/CSS платформа для разработки адаптивных веб-приложений, которую применяют при создании сайтов и интерфейсов администраторских панелей. Основные преимущества Bootstrap: высокая скорость верстки; кроссбраузерность и кроссплатформенность; наличие хорошей документации, большого сообщества и огромного количества разнообразных обучающих материалов; низкий порог вхождения (необходимо знать лишь основы HTML, CSS, JavaScript и jQuery).      JavaScript Язык программирования, который используется как при разработке клиентской стороны веб-приложения, так и серверной. При помощи JavaScript (сокращенно - JS) можно писать даже десктопные (настольные) и мобильные приложения, используя определенные программные платформы и библиотеки. Этот язык позволяет:  динамически изменять разметку; осуществлять интерактивное взаимодействие с пользователем; анимировать изображения; совершать валидацию форм; управлять мультимедиа и т. д.  Другими словами, JavaScript “оживляет” страницу и добавляет ей функциональности. Хорошее владение данным языком программирования является обязательным для каждого FrontEnd разработчика. Сергей Росоха, Software Architect с 11-летним опыта во FrontEnd/JS, отмечает важность изучения алгоритмов и структур данных на JavaScript:  “JavaScript давно уже используется не только для разработки динамических интерфейсов пользователя, но и для написания достаточно сложной бизнес-логики. Поэтому знание алгоритмов и структур данных становится критичным для JS-разработчиков. ” (источник) JavaScript использует официальный стандарт ECMAScript (сокращенно - ES), который подразумевает определенное формальное описание синтаксиса, базовых объектов и алгоритмов. На данный момент существует множество различных версий ES. Работодатели чаще всего требуют знание ES6.  Однако, вначале необходимо изучить чистый JavaScript и лишь потом вникать в новые стандарты. Как ни крути, а классику надо знать. Благодаря хорошему владению JS можно быстро разобраться в любой версии ES и затем освоить любой фреймворк или библиотеку.    Фреймворки JavaScript Это инструменты, с помощью которых создаются динамические веб/мобильные/десктопные приложения на языке JavaScript. Они ускоряют разработку веб-приложений и предусматривают четко структурированную организацию кода, повышая его качество и чистоту.  Самыми популярными фреймворками для фронтенд-разработки можно назвать Vue.js, React и Angular. Каждый из них предназначен для решения своего спектра задач и имеет различную степень сложности: Vue.js - самый легкий (но и с наименьшим сообществом), React - средней сложности, Angular - высокой сложности. Стоит сконцентрироваться на глубоком изучении одного фреймворка, но в то же время очень рекомендуется знать особенности и сферу применения всех вышеперечисленных технологий. Какой фреймворк все же выбрать? Мнения на этот счет расходятся. Инструментарий выбирается индивидуально под проект и трудно предугадать, какие задачи вам нужно будет решать. Мы рекомендуем Angular.       CSS препроцессоры  CSS препроцессор - это программа, которая имеет свой собственный синтаксис, но может сгенерировать из него CSS код. Самыми популярными считаются SASS, Stylus, LESS и PostCSS, однако, наибольшее комьюнити имеет именно SASS. Препроцессоры предназначены для: ускорения процесса написания кода; упрощения чтения кода и дальнейшей его поддержки; минимизации рутинной работы при написании кода. Для повышения эффективности написания CSS кода вполне достаточным будет изучение лишь одного препроцессора.   Git Самая популярная распределенная система управления версиями, которая позволяет вести историю разработки проекта с возможностью доступа к каждой сохраненной версии. Таким образом, если в процессе создания программный продукт стал неправильно функционировать, есть возможность вернуться к предыдущей рабочей версии вместо длительных поисков ошибок.  Также системы управления версиями являются неотъемлемым инструментом командной разработки, который дает возможность девелоперам работать над одним проектом одновременно, сохраняя внесенные изменения. Заодно удобно отслеживать выполнение задач каждым членом команды. Очень важный инструмент для любого IT-разработчика.     jQuery Небольшая, быстрая и многофункциональная JavaScript-библиотека, для работы с которой необходимо владеть HTML, CSS и JavaScript на базовом уровне. Она призвана упростить программирование на JS. Данная библиотека представляет объемные решения распространенных задач в виде методов, которые вызываются одной строчкой кода.  Несмотря на то, что jQuery теряет популярность, уступая место фреймворкам JS, большое количество сайтов все еще используют эту библиотеку. FrontEnd разработчик, работающий в офисе, не всегда создает новые веб-сайты - необходимо поддерживать и обновлять уже существующие. Тут без знания jQuery никак не обойтись.   JavaScript Core (DOM, AJAX, JSON) DOM (Document Object Model) - объектное представление исходного HTML-документа. Ключевым является понятие DOM-дерева, которое описывает структуру страницы. С помощью объектной модели JavaScript получает полную власть над HTML-документом: возможность редактировать, удалять и добавлять элементы и атрибуты HTML, менять CSS код и т. д.  AJAX (Asynchronous JavaScript And XML) - это синтез технологий JavaScript и XML, который фактически представляет собой комбинацию: встроенного в браузер XMLHttpRequest-объекта (чтоб запрашивать данные с веб-сервера); JavaScript и HTML DOM (чтобы отображать или использовать данные). AJAX позволяет веб-страницам совершать асинхронное обновление, обмениваясь данными с веб-сервером. Благодаря этой технологии страница не нуждается в перезагрузке - обновляется лишь конкретная ее часть (вспомните ленту новостей в социальных сетях). JSON (JavaScript Object Notation) - это общий формат обмена данными. Позволяет совершать обмен информацией между программными продуктами, написанными на разных языках. Таким образом, клиент, использующий JavaScript, может легко передавать данные на сервер, который реализован с помощью Ruby/Java/PHP. Все три технологии являют особую ценность для каждого веб-разработчика и раскрывают организацию работы интернет-приложения.      БЭМ “Блок, Элемент, Модификатор” - методология, предусматривающая компонентный подход к разработке веб-страниц, в основе которого лежит принцип разделения интерфейса на независимые блоки. Подход БЭМ позволяет повторно использовать существующий код в создании других страниц с сохранением всех его свойств (размеры, шрифт, цвет и т. д.).       Webpack Мощный сборщик модулей, который позволяет скомпилировать в один файл несколько разных модулей. Используется во время работы над объемными проектами. Успешно применяется как во фронтенд-разработке, так и при создании бэкенд-приложений.   Flex и Grid CSS Технологии верстки надежных адаптивных веб-страниц, которые позволяют легче создавать динамические сайты и удобнее структурировать их содержимое. Лучше всего Flex-верстку в действии показывает интерактивный сайт flexboxfroggy.com, а Grid-верстку - cssgridgarden.com.   Gulp / Grunt Системы сборки, которые автоматизируют рутинные задачи разработчиков: минификацию кода, оптимизацию изображений, тестирование, анализ качества кода и прочее. Подходят при разработке небольших проектов.    TypeScript Кроссплатформенный строго типизированный язык, который является расширением JavaScript. Строгая типизация позволяет уменьшить количество потенциальных ошибок в исходном коде, написанном на TypeScript. Также, этот язык реализует концепции, которые близки объектно-ориентированным языкам, таким как C#, Java и подобным. TypeScript повышает скорость и удобство написания сложных комплексных программ, вследствии чего их становится легче поддерживать, масштабировать и тестировать.     SVG Язык разметки масштабируемой векторной графики. Изображения на странице, сделанные с помощью SVG, корректно отображаются на экранах с различным разрешением, не теряя при этом своего качества, в отличии от традиционных растровых .jpeg, .png и других.    Английский язык Знание английского языка является одним из основных требований к фронтенд-разработчику, поскольку большое количество полезной информации находится именно на англоязычных сайтах. Уровень чтения технической документации будет достаточным для комфортного пользования иностранными ресурсами.      Итоги FrontEnd разработчик - достаточно универсальный боец в мире веб-разработки. Он должен уметь и верстать, и создавать логику работы клиентской части, и понимать работу серверной части веб-приложения. Для освоения такого обширного инструментария стоит запастись временем, терпением и упорством. Перечисленные в статье средства разработки сайтов также имеют аналоги, поскольку для решения разных задач подходят разные веб-инструменты. Однако мы выбрали самые популярные и эффективные из них.    Если у вас остались вопросы о последовательности и необходимости изучения тех или иных технологий, ответы вы можете найти в видео Как стать FrontEnd разработчиком, в котором подробно рассматриваются основные технологии создания клиентских веб-приложений.  Для тех, кто хочет стать FrontEnd разработчиком, на ITVDN создана комплексная программа обучения, которая включает в себя 35 видео курсов. Желаем вам успехов в достижении ваших целей!   Оставайтесь с ITVDN!    

Введение В этой статье мы рассмотрим некоторые инструменты, книги и ресурсы о том, как начать обучение веб-разработке. Эта статья направлена на тех, кто уже работал с HTML, CSS и JavaScript. Зачем учиться веб-разработке? Одно из главных преимуществ обучения веб-разработке – Вы получите навыки работы с большим количеством клиентов, проектов, а также научитесь контролировать собственный рабочий процесс. С чего начать? Ниже мы рассмотрим четыре языка программирования, которые стоит рассматривать прежде всего. HTML5 HTML5 – последняя спецификация HTML. Он идет рука об руку с CSS3, новейшим образцом CSS. Новая спецификация HTML позволяет создавать приложения для браузера и мобильного устройства. CSS3 С помощью CSS3 Вы сможете сделать разметку более стильной и профессиональной. Если Вы чувствуете себя достаточно опытным в CSS3, Вам стоит прочитать SVG книги. LESS LESS – это надстройка CSS, она расширяет язык CSS, добавляет в него динамику. Он вводит переменные, операции, function-like элементы. Возможность писать таблицы стилей упростит и улучшит написание кода. Less работает в браузере, в Node и Rhino. SASS Таблицы стилей становятся больше и сложнее. В работе с ними может помочь препроцессор. Sass позволяет использовать функции, не существующие в CSS, например, переменные, возможность наследования и многое другое. Составители для LESS и SASS LESS и SASS - надстройки, поэтому Вам понадобится компилятор для преобразования результата. CodeKit CodeKit – одно из лучших приложений для разработчиков и дизайнеров, работающих на Mac. CodeKit следит за всем, что Вы создаете. Приложение может исправлять ошибки и составлять код самостоятельно. Prepros Prepros – GUI-компилятор, предназначенный для предварительной обработки таких языков: Compass, LESS, Sass, Jade, Stylus, Slim, Markdown, CoffeeScript и Haml. Prepros также может обновить браузер, когда Вы меняете свой код в редакторе. С Prepros можно работать и тем, у кого система Windows. Текстовые редакторы для веб-разработчиков Sublime Text Sublime Text – текстовый редактор для кода разметки. В нем легкий пользовательский интерфейс, он удобен в эксплуатации. Atom Этот современный текстовый редактор начал пользоваться успехом совсем недавно, и этот проект пока не идеален. Он был создан веб-сервисом GitHub. Atom состоит из 50 модулей вокруг небольшого ядра с открытым кодом. Его цель - глубоко расширяемая система, стирающая различие между пользователем и разработчиком. Обучение веб-разработке с помощью книг Book Apart управляют люди, знающие веб лучше, чем 99% пользователей. Содержание этих книг всегда наивысшего качества, их легко читать, и они обеспечивают понимание процесса создания веб-сайтов. HTML5 для веб-дизайнеров Спецификация HTML5 состоит из 900 страниц, достаточно трудных для понимания. HTML5 для веб-дизайнеров - 85 интересных страниц. Когда Вы закончите ее читать, Вы не будете задавать себе вопрос, что такое HTML5, как он работает, или что нужно делать, чтобы стать лучшим веб-разработчиком. Эта небольшая книга рассказывает про все в легкой и сжатой форме. CSS3 для веб-разработчиков Если Вы не знаете, с чего начинать обучение CSS3, купите книгу Дэна Седерхольма (Dan Cederholm) (соучредитель Dribbble). Она содержит информацию о расширенных функциях, селекторах, а также о CSS3-анимации. Sass для веб-дизайнеров Sass может помочь создать интерактивные элементы. Дэн Седерхольм (Dan Cederholm) выпустил книгу, рассказывающую о Sass — процессоре предварительной обработки CSS. Это поможет нам взглянуть на CSS с другой стороны. Адаптивный веб-дизайн Чем больше предприятий создают страницы в интернете, тем больше спрос на разработчиков, способных написать код на современных языках программирования. Автор книги по адаптивному веб-дизайну - Итан Маркотт (Ethan Marcotte). Источник: http://codecondo.com/web-designers-want-become-web-developers/

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

Введение В этой статье я детально опишу процесс сборки FrontEnd проекта, который стал незаменимым в моей ежедневной работе, очень облегчил рутинную работу и предоставил больше свободного времени для других задач.  Сейчас в интернете существует большое число различных сборщиков и подходов к ней, и каждый выбирает для себя что-то по вкусу. Я только опишу вам один из многих подходов, а вы уже решите сами, подходит он вам или нет. Как уже все догадались, речь пойдет о сборщике под названием Gulp. Скажу сразу, что у вас  должен быть установлен Node.js. У кого не установлен, то вам сюда https://nodejs.org/en/download/ Итак, приступим: Откроем консоль и создадим папку mkdir nebo15 Зайдем в папку, которую только что создали cd nebo15/ запустим команду инициализации проекта: npm init Заполняйте поля теми данными, которые вы знаете, остальные просто пропускайте, нажав Enter. На выходе получим что-то наподобие этого: {    "name": "nebo15",   "version": "1.0.1",   "description": "first gulp project",   "author": "stranger",   "license": "MIT",   "main": "main.js",    "dependencies": {       "gulp": "^3.9.0"    } } В строке dependencies я указал, что нам понадобится gulp и тут же будут появляться все наши плагины. Основные плагины, с которыми я хочу вас познакомить: gulp-minify-css — нужен для минимизации CSS кода, создаст один файл *.min.css gulp-uglify — будет минимизировать наш JS, создаст один файл *.min.js gulp-autoprefixer — авто-добавление добавляет вендорные префиксы (-webkit, -o, -moz) к CSS свойствам, нужно чтобы ваш код поддерживался во всех браузерах. browser-sync — понадобится  для запуска локального сервера. gulp-sass — предназначен для компиляции SCSS и SASS кода. gulp-sourcemaps — предназначен для генерации css sourscemaps, которые понадобятся при отладке кода //= footer.html   эти комментарии будут заменены на код с файла при компиляции gulp-watch — предназначен для отслеживания за изменениями файлов. rimraf —  для очистки папок по завершению сборки (rm -rf для nodejs). После установки всех плагинов у нас будет файл package.json: делается это при помощи команды npm install name_of_package --save-dev  где --save-dev означает то, что пакет будет остановлен в проект, а не глобально. Для глобальной установки используйте тег -g. Bower Сейчас просто не представляю своей жизни без установщика Bower и хочется верить, что вы не исключение. Если же нет, то почитать о Bower можно тут. Давайте поставим его в наш проект. Для установки напишем в консоли: bower init Заполняйте поля те, что знаете, остальное пропускайте. В конце вы получите файл bower.json: {   "name": "nebo15",   "version": "1.0.0",   "authors": [     "Dima"   ],   "license": "stranger",   "ignore": [     "**/.*",     "node_modules",     "bower_components",   ], "dependencies": {     "normalize.css": "*",     "jquery": "2.*" } Установим пакеты с dependencies: bower i Давайте создадим базовую структуру и настроим сборку нашего проекта.   Структура проекта: Сначала нужно 2 папки. Первая (src), в которой мы собственно будем писать код, и вторая (build), в которую сборщик будет собирать файлы.  Текущая структура у нас выглядит так: В src создали типичную структуру для проекта. Сделаем main файлы в папках js/ и style/ и создадим стартовую index.html страничку такого содержания. index.html Структура папки src теперь будет выглядеть так: Тут все просто: fonts —папка с шрифтами img — папка с картинками js — папка со скриптами. Тут в корне - main.js, а рабочие файлы в папке partials style — папка со стилями. Тут в корне - main.scss, а рабочие файлы в папке partials template — тут будем хранить  html код Все html страницы, которые мы верстаем, будут лежать в папке src Gulpfile.js Итак, начнем, сначала подключим все зависимости в этот файл. gulpfile.js Так же создадим js объект, в который пропишем все нужные нам пути, чтобы при необходимости легко в одном месте их редактировать: Веб сервер Чтобы иметь livereload, нам необходимо написать себе веб-сервер. Для этого напишем следующую таску : Сборщик для html Напишем таску для сборки верстки html Стоить вспомнить, что rigger - плагин, позволяющий использовать конструкцию для подключения файлов: //= template/footer.html В папке src/template/  создадим файлы header.html и footaer.html В папку header.html поместим В папку footer.html поместим а файл index.html отредактируем соответственно так: Запускаем сборку следующей командой gulp html:build После того, как она соберется, переходим в папку build и увидим там наш файл index.htm l Сборщик для JS Таска для сборки скриптов будет примерно такая Зададим структуру для main.js: Запустим сборку js: gulp js:build  И в папке build/js  можно увидеть скомпилированный и модифицированный файл. Сборщик для стилей Таска для сборки SCSS: Здесь все легко, но если вы заинтересовались настройками автопрификсера, то об этом можно почитать тут. Запустим нашу таску gulp style:build Теперь давайте определим таску с именем «build», которая будет запускать все: Отлеживаем изменения в файлах Чтобы не запускать каждый раз сборщик вручную, давайте попросим gulp при изменении какого-то файла  перезапускаться.  Понять это просто. Просто при изменениях какого-то файла происходит пересборка проекта. Попробуйте запустить в консоли: gulp watch Измените что-то в проекте и увидите, что произойдет. Очистка Если вы прикрепите большую библиотеку, потом запустите задачу js:build и потом решите, что она вам больше не нужна и удалите ее, то она все равно останется в папке проекта build. Так что было бы удобно периодически удалять ее содержимое. Создадим для этих потребностей простую таску Теперь, запуская команду с консоли gulp clean папка build будет удаляться. Напоследок Мы должны определить стандартную таску, которая запустит всю нашу сборку , используя только одну команду. gulp.task('default', ['build', 'webserver', 'watch']); Запустим в консоли gulp Вот и все. Теперь вы можете настроить проект для себя. Надеюсь, данная статья оказалась познавательной для вас.

Введение Как веб-разработчик, Вы можете знать, что форматирование данных на серверном языке – не очень сложная задача. Достаточно базового понимания языка и того, что Вам нужно для реализации, и вот – у Вас есть хорошо отформатированный объект даты и времени. Например, следующий код С# является хорошо отформатированным и может предоставить нужный Вам объект даты и времени. var dateOfBirth = new DateTime(1995, 08, 29); // My date of birth  var formatted = dateOfBirth.ToString("MMMM dd, yyyy"); // Would hold: August 29, 1995   В выше написанном коде мы предусмотрели формат данных, который нам нужен, и код, что обеспечит ожидаемый результат. Впрочем, делать это в JavaScript весьма трудно, потому как в JavaScript нет переопределенного метода ToString, который может преобразовать объект даты и времени в должным образом форматированное значение. Тем не менее, объекты Date в JavaScript используют методы, с помощью которых можно извлечь значения месяца, дня или года. Мы будем их использовать, чтобы сгенерировать форматированный string для объекта date. Также заметим, что в JavaScript объект даты и времени является числом, которое отображается как количество миллисекунд от 1-го января 1970 г. Поэтому, чтобы не писать свой собственный код для подсчета месяцев и дат, можете использовать встроенные функции getMonth, getDate и др. чтобы получить нужные значения. В нашей статье мы покажем Вам, как написать код и как правильно форматировать запись string в объект даты и времени. Объект даты и времени в Javascript Объект даты и времени (Date) в JavaScript намного компактнее, чем в других языках программирования. Он не обеспечивает множество функций и особенностей. Это просто конструктор, который принимает число миллисекунд или значение строки, что представляет объект даты и времени в пределах от 1 января 1970 года до сегодняшнего дня (каким бы он ни был). Вы легко можете создать его экземпляр, используя следующий код var date = Date.now(); // current date time  // OR  var date = new Date(); // new instance; default  // OR  var date = new Date('string-notation-of-datetime'); // Any date time upto 1 January 1970 from Now.   Теперь давайте поработаем с данным исходным кодом и посмотрим, что JavaScript может нам предложить. Написание веб-приложения В Вашем HTML Вы можете определить поля ввода от пользователя и установить диапазон их типов, что позволило бы пользователю вводить значение любого из этих типов. В нашей статье мы будем использовать тип date. Используем следующую HTML-разметку Примечание: мы использовали Bootstrap в качестве стиля. <input type="date" class="form-control"/> Контроль после рендеринга Это то, что у нас есть для макета, а теперь давайте обратимся ко входным данным пользователей. Мы должны найти указанную пользователем строку даты и времени, а также рассчитать по ней возраст. var dateValue = new Date($('input').val()); // Get the value    // Now comes the stringification... Following code does that.  var date = getMonth(dateValue.getMonth()) + " " + dateValue.getDate() + ", " + dateValue.getFullYear(); В JavaScript методы getDate, getMonth возвращают номер объекта. Вместо использования номера в качестве даты создадим другую функцию, которая возвращает месяц из нашего целого значения. Примечание: date.getMonth() при возврате значения начинает отсчет от 0. function getMonth(index) { // Pass the index as parameter      switch (index) { // Switch on index          case 0:             return "January";             break;         case 1:             return "February";             break;         case 2:             return "March";             break;         case 3:             return "April";             break;         case 4:             return "May";             break;         case 5:             return "June";             break;         case 6:             return "July";             break;         case 7:             return "August";             break;         case 8:             return "September";             break;         case 9:             return "October";             break;         case 10:             return "November";             break;         case 11:             return "December";             break;         default: // Wouldn't get called usually because range is 0-11              "Invalid number: " + index;             break;     } } Описанная выше функция возвращает строку для месяца. Поэтому, вышеуказанный код сможет вернуть данные в строковом представлении.Что касается функции расчета возраста, то реализовать ее не так просто, как в С# или других языках. Вам надо вручную отбросить значения объекта даты и времени в миллисекундах с 1970 года, учитывая вычисление результата от даты рождения до текущего времени. Запутались? Давайте проверим наш код и упростим формулировку. var age = Math.abs(              new Date(                    Date.now() - dateValue // 1. Get the difference as new Date object                ).getUTCFullYear() - 1970 // 2. Calculate the years           ); // 3. Get the value   Мы разделили процесс на три этапа: Прежде всего получим значение после отрицания даты рождения от текущей даты. Это будет основой для нашего алгоритма возраста. Дальше найдем UTC-значение года от значения, что мы получили через отрицание, и вычтем от него 1970. Теперь получим абсолютное значение от шага 2. Теперь функция будет вмещать значение возраста для введенных пользователем данных. Запустим вышеуказанную функцию и получим HTML, для примера HTML-разметка с указанием даты в отформатированной строке и возраста пользователя. Заключение Теперь Вы знаете как можно выбрать введенные пользователем данные и рассчитать возраст пользователя с помощью JavaScript, а также как показать его в строковом представлении для удобства чтения. Источник: http://www.c-sharpcorner.com/UploadFile/201fc1/calculating-and-formatting-date-in-javascript/

Кто такой верстальщик? Языки верстки HTML & CSS Техники верстки Препроцессоры Графический редактор и векторная графика Инструмент упрощения верстки Bootstrap 4 Язык программирования JavaScript Библиотека jQuery Методология БЭМ Вспомогательные инструменты Система управления версиями Git Английский язык Итоги   Всем привет! Вы когда-либо задумывались о том, как происходит полный цикл разработки современного веб-сайта? С чего все начинается и как мы приходим к такому сервису, который имеет привлекательный и гармоничный внешний вид, а также богатый функционал? Давайте разберемся с этим вопросом, а заодно поближе познакомимся с героем данной статьи. Прежде всего стоит знать, что сегодня человек-оркестр, который мог бы осуществить полный цикл создания веб-сайта — очень редкое явление. Процесс реализации одной только клиентской стороны уже является трудом целой команды специалистов. Если говорить о профессиональной веб-студии, то разработка несложного корпоративного веб-сайта осуществляется следующим образом. Вначале за заказчика сайта берется менеджер по продажам. Он общается с клиентом через телефон, электронную почту, при личной встрече. Обсуждает все детали возможного сотрудничества. Задача менеджера по продажам — решить все финансовые и юридические нюансы, связанные с созданием сайта. После заключения договора и оплаты услуг наступает звездный час PM`а (менеджер проекта), который и управляет проектом. Он ответственен за координацию действий команды разработчиков: проектирование и расстановка приоритетов, планирование выполнения задач, контроль, своевременное решение проблем, согласование промежуточных и конечных этапов создания и продвижения сайта. PM является связующим звеном между заказчиком и разработчиками: он плотно сотрудничает с клиентом, выясняет его требования, желания, предпочтения, затем конвертирует всю информацию в понятный команде девелоперов вид. После определения требований за работу берется веб-дизайнер. Данный специалист занимается графической и художественной составляющими сайта. В этой секции веб-кухни происходит создание красивого и приятного интерфейса с удобным размещением кнопок, меню и других элементов веб-сайта. На выходе получаются макеты, которые учитывают различные платформы потенциальных посетителей (стандартные и широкоформатные экраны ПК, планшеты, мобильные устройства и т. д.). Результат работы веб-дизайнера — графическая схема с указанием оттенков, отступов и других параметров веб-сайта в статическом виде, которая максимально точно отображает внешний вид будущего сайта. Фактически, это точный рисунок сайта. Готовый макет передается в руки верстальщика. Теперь при помощи различных элементов языка разметки веб-страницы графические элементы дизайна (рисунки, шрифты, таблицы и т. д.) будут переведены в понятный для браузера формат. Можно сказать, что он создает текстовый макет того, что придумал дизайнер. После того, как страница сверстана и проверена в различных браузерах на правильность отображения, она передается в работу специалисту, который подключает необходимый клиентский функционал, используя JavaScript-фреймворки, библиотеки и сопутствующие технологии. Как правило это FrontEnd разработчик. Затем начинается работа BackEnd разработчика, который занимается реализацией серверной стороны веб-сайта (базы данных, серверная архитектура, программная логика). Обработка пользовательских запросов, хранение и оперирование пользовательскими данными, аутентификация, оптимизация функциональных возможностей сайта и многое другое — обязанности бэкендщика. С уже готовым сайтом работают те специалисты, которые ответственны за его наполнение и продвижение в поисковых системах: контент-менеджер, специалист по контекстной рекламе, SEO-специалист, копирайтер и другие. Сегодня же нас интересует именно тот, кто превращает графику в узнаваемый браузером формат — верстальщик. Разберемся в специфике его работы и навыках, которыми должен обладать потенциальный кандидат на данную должность.   Кто такой верстальщик? Сразу дадим определение терминам, которые важны для составления целостной картины. Верстальщик — это специалист, который занимается версткой интернет-страниц. Верстка — процесс создания визуальной составляющей сайта. Структура самого сайта задается языком гипертекстовой разметки HTML, а каскадная таблица стилей CSS описывает его внешний вид. Проще говоря, HTML задает каркас страницы, а CSS занимается его облагораживанием (цвет, шрифты, стили, расположение, отображение блоков и т. д.). Если говорить о профессиональной верстке, то она происходит согласно заранее разработанному макету, который обычно создает веб-дизайнер, знающий тонкости своего ремесла. После получения графического документа от дизайнера верстальщик использует Photoshop или другие аналоги для извлечения необходимой информации (Illustrator, Sketch, Figma и другие): используемые шрифты, иконки, картинки, точные кодировки цветов, размеры элементов в пикселях, их точное расположение. Только после такой подготовительной работы герой нашей статьи может открыть среду написания кода и приступить к верстке. Давайте узнаем, каков арсенал инструментов использует верстальщик в своей работе.   Какие языки / технологии / инструменты применяет верстальщик?   HTML & CSS Языки верстки, которые мы уже упоминали. Являются главными инструментами верстальщика. Без них не обходится создание ни одного веб-сайта. HTML определяет его структуру (костяк), а CSS — внешний вид (вся остальная надстройка).   Техники верстки Для создания качественных веб-сайтов необходимо использовать специальные техники, которые упрощают верстку, делая код понятным и легко масштабируемым. Таким образом, выделяют три вида верстки:   фиксированная; резиновая; адаптивная. Фиксированную верстку применяли еще при создании самых первых сайтов. Тогда они были простые, не требовали какой-либо оптимизации и кроссбраузерности, а потому не было потребности в разработке новых сайтостроительных техник. При фиксированной верстке ширина сайта всегда одинаковая вне зависимости от разрешения экрана. Это самый простой подход к реализации верстки, но при этом самый непопулярный, поскольку сегодня пользователи используют множество моделей компьютеров, ноутбуков, телефонов и планшетов для выхода в сеть. В связи с этим, разрешение экранов варьируется от 200 до 3000 пикселей. Резиновая верстка способна менять размеры сайта в зависимости от размерности экрана. Таким образом, проблемы фиксированного вида решаются, однако сама процедура набора страницы усложняется. Верстальщику приходится думать о том, как растянуть картинки, чтобы они не потеряли в качестве и корректно отображались на всевозможных девайсах. Ну и о производительности не забывать. Кому нужен сайт, который будет прогружаться вечность? Адаптивная верстка является самой сложной. Сайт помимо размеров меняет свой внешний вид в зависимости от размеров устройства, на котором воспроизводится. Ориентирована в первую очередь на мобильные устройства, оттого и имеет сегодня большой спрос. Также, качественная верстка должна обладать следующими свойствами: семантичность; кроссбраузерность; валидность. Семантика в верстке означает соответствие тегов информации, которая находится внутри них. С ее использованием код становится чище, читабельнее и лаконичнее. Более того, поисковые системы начинают лучше воспринимать такие сайты, повышая их позиции при ранжировке.    Кроссбраузерность означает, что разработанный сайт должен качественно отображаться во всех популярных браузерах (Mozilla Firefox, Opera, Google Chrome, Safari, IE). Почему она так важна? Все дело в том, что один и тот же сайт может по-разному отображаться в разных браузерах. Не будем заглядывать за кулисы этого явления — просто подчеркнем, что современные сайты обязаны отвечать требованию кроссбраузерности. Валидность веб-сайта означает соответствие его HTML-кода стандартам W3C (Консорциум Всемирной паутины). Валидация предусматривает соблюдение корректности кода страниц, отсутствие синтаксических ошибок, наличие вложенности тегов и т. д. Проверка HTML-кода выполняется при помощи специальной программы — валидатора кода. Она находит и фиксирует все несоответствия со стандартом, указывая на их местонахождение и формулируя, где проблемный участок и почему он должен быть исправлен. Естественно, важным является и тот нюанс, что ваш код должен быть минимален, а интернет-страница, созданная с его помощью, должна быстро прогружаться. Ниже мы также рассмотрим вспомогательные инструменты, которые обеспечивают выполнение этих условий.   Sass/SCSS Препроцессор, который является расширением CSS. Если современный CSS сам по себе простой и мощный инструмент, то в комбинации с препроцессором это вовсе боевая машина для качественного оформления контента на интернет-страницах. Польза Sass/SCSS особенно отчетливо ощущается в больших проектах, когда количество строчек кода кажется бесконечным. Препроцессор позволяет использовать функции, недоступные в самом CSS. Например, переменные, вложенности, миксины, наследование и другие вещи, которые упрощают и делают удобным написание CSS-кода.   Photoshop / Illustrator / Sketch / Figma / Avocode Графический редактор, как мы уже упоминали, необходим верстальщику для извлечения необходимой информации из предварительно подготовленного макета: используемые шрифты, иконки, картинки, точные кодировки цветов, размеры элементов в пикселях, их точное расположение. Какой редактор был использован для создания макета, такой следует использовать и для изъятия необходимых данных.   SVG Вдогонку за графическими редакторами упомянем об SVG. Это язык разметки масштабируемой векторной графики. Изображения на странице, сделанные с помощью SVG, корректно отображаются на экранах с различным разрешением не теряя при этом своего качества, в отличии от традиционных растровых .jpeg, .png и других. Верстальщик должен уметь работать с SVG, поскольку он важен для оптимизации и быстродействия сайта, а также используется для реализации анимации векторных изображений, разработки прелоадеров и других интерактивностей.   Bootstrap 4 Это HTML, CSS, JS фреймворк для разработки кроссбраузерных веб ориентированных интерфейсов. Bootstrap являет собой набор инструментов от Twitter, созданный для облегчения разработки веб-приложений и сайтов. Он использует CSS и HTML для типографии, форм, кнопок, таблиц, сеток, навигации и т. д., а также дополнительные расширения JavaScript, упрощающие работу веб-разработчика. Данные свойства позволяют коду, написанному с применением Bootstrap, быть переиспользуемым, понятным и компактным. Основные преимущества фреймворка: высокая скорость верстки; кроссбраузерность и кроссплатформенность; наличие хорошей документации, большого сообщества и огромного количества разнообразных обучающих материалов; низкий порог вхождения (необходимо знать лишь основы HTML, CSS, JavaScript и jQuery).    JavaScript Язык программирования, который повсеместно используется в создании сайтов, даже в реализации их серверной стороны. Становиться ниндзя JavaScript верстальщику не нужно — это задача FrontEnd разработчика, который прорабатывает логику клиентской стороны веб-приложений. Герою статьи JS необходим для реализации различных динамических элементов на странице: анимации, слайдеры, калькуляторы и т. д. Также, этот язык применяется для подключения различных библиотек и определенных взаимодействий с ними. Знание базы JavaScript необходимо для комфортного использования библиотеки jQuery, подробнее о которой пойдет далее речь.     jQuery Небольшая, быстрая и многофункциональная JavaScript-библиотека, для работы с которой необходимо владеть HTML, CSS и JavaScript на базовом уровне. Она упрощает процесс программирования на JS и представляет объемные решения распространенных задач в виде методов, которые вызываются одной строчкой кода. Этой особенностью jQuery приносит ощутимую пользу верстальщикам. Вместо углубления в JavaScript и написания тонны кода, можно просто использовать уже готовые решения в различных задачах.   Методология БЭМ “Блок, Элемент, Модификатор” — методология, предусматривающая компонентный подход к разработке веб-страниц, в основе которого лежит принцип разделения интерфейса на независимые блоки. Подход БЭМ позволяет повторно использовать существующий код в создании других страниц с сохранением всех его свойств (размеры, шрифт, цвет и т. д.). Таким образом обеспечивается расширяемость и повторная используемость компонентов интерфейса. Соблюдение принципов БЭМ повышает качество, читаемость кода, увеличивает производительность и упрощает командную работу.   CMS (Wordpress / Opencart / Joomla / Bitrix) Content Management System — система управления контентом, являющая собой движок для обеспечения и организации процесса создания, редактирования и управления контентом. В случае отсутствия CMS разработчики были бы обязаны реализовывать дополнительную функциональность для каждой новой страницы, вносить новый контент самостоятельно программным путем и т. д. Ниже приведем пример для наглядности. Допустим, вы ведете собственный блог на специализированной платформе и у вас появилась необходимость сделать новую рубрику. Вы же не будете просить целую команду разработчиков создать новую интернет-страницу с нуля со всей функциональностью либо дорабатывать уже существующую под каждый новый пост? А в случае с интернет-магазином вы были бы вынуждены проделывать такие манипуляции для каждого нового товара. Вот для этого и существуют CMS. Они предоставляют удобную администраторскую панель вашему сайту, с которой в дальнейшем работает контент-менеджер. В профессиональной среде процесс настройки взаимодействия движка и готового шаблона сайта называется “натяжкой” шаблона на CMS. Основные функции CMS: предоставление инструментария для работы над контентом; управление контентом — хранение, управление потоком документов, соблюдение режима доступа, контроль версий; публикация контента; представление необходимой информации в удобном для навигации и поиска виде.        Gulp / Webpack Gulp — система сборки, которая автоматизирует рутинные задачи верстальщика. В число ее обязанностей входят: минимизация кода, оптимизация изображений, тестирование, анализ качества кода и прочее. Другими словами, она используется для сбора верстки. Webpack по сравнению с Gulp обладает более широкими настройками и функционалом. Предназначенный для удобной разработки одностраничных веб-приложений с использованием JavaScript.   Git Самая популярная распределенная система управления версиями, которая позволяет вести историю разработки проекта с возможностью доступа к каждой сохраненной версии. Таким образом, если в процессе создания программный продукт стал неправильно функционировать, есть возможность вернуться к предыдущей рабочей версии вместо длительных поисков ошибок. Также системы управления версиями являются неотъемлемым инструментом командной разработки, который дает возможность девелоперам работать над одним проектом одновременно, сохраняя внесенные изменения. Заодно удобно отслеживать выполнение задач каждым членом команды. Очень важный инструмент для любого IT-разработчика.   Английский язык Знание английского языка является одним из основных требований к верстальщику, поскольку большое количество полезной информации находится именно на англоязычных сайтах. Уровень чтения технической документации будет достаточным для комфортного пользования иностранными ресурсами.    Итоги Верстальщик — это специалист по верстке веб-страниц. Несмотря на довольно лаконичное определение, список требуемых от него знаний и навыков гораздо красноречивее. Верстальщик в 2020-м году должен владеть неплохим стеком технологий. Более того, мы привели лишь общий список инструментов. В реальности он может немного отличаться согласно направлению деятельности компании/веб-студии. Если к перечисленному добавить углубленные познания JavaScript и хорошее владение одним из фреймворков (Angular, Vue.js, React) + парочка смежных технологий, получится полноценный FrontEnd разработчик.  Отдельно отметим портфолио верстальщика. Оно должно быть в наличии у данного специалиста в обязательном порядке, иначе шансы получить job-оффер ничтожно малы (не забывайте и о конкуренции). В портфолио вам необходимо продемонстрировать все свои навыки и умения. Это может быть десяток проектов с использованием по крупице различных технологий в каждом, либо пара-тройка, но с концентрированием всех ваших умений и познаний в верстке. В этом случае пригодятся специальные ресурсы с опубликованными бесплатными макетами, которые можно брать и верстать, набивая руку и набираясь опыта. Также, если вы заинтересованы в изучении ремесла верстальщика, ITVDN имеет для вас хорошие новости. На нашем образовательном ресурсе вы сможете освоить данную специальность за 4 месяца. Учебная программа каждой специальности, в том числе и верстальщика, содержит: тщательно подобранный пакет видео курсов; план обучения с нуля до уровня специалиста, который вы можете адаптировать под свой уровень; Интерактивный Тренажер навыков для формирования навыков написания кода; учебные материалы, исходники программного кода, опорный конспект, презентации к урокам; доступ к Форуму, где каждый учащийся может общаться с другими студентами, тренерами и единомышленниками; возможность персональной консультации с тренером согласно выбранному пакету подписки; возможность проходить тестирование для подтверждения знаний, полученных в результате прохождения видео курса; электронный сертификат об окончании курса после успешного завершения тестирования. Все видео курсы записываются опытными разработчиками, которые проходят соответствующую сертификацию, чем подтверждают свое мастерство владения той или иной технологией. Наши преподаватели работают в IT и в курсе всех современных тенденций в своей сфере разработки. Знакомство со специальностью мы рекомендуем начать с просмотра бесплатных вебинаров по специальности верстальщик, в частности, с вебинара Елены Хижняк “Как стать верстальщиком?”, в котором отражены все самые актуальные тренды и требования. Возможно, нас читают практикующие верстальщики? С удовольствием прочтем вашу точку зрения на позиции, изложенные в данной статье. Также, будем рады любым вопросам и замечаниям от всех читателей! Ну а тем, кто решил выбрать профессию верстальщик мы желаем быть упрямыми, оптимистичными и с неугасаемым огоньком жажды знаний в глазах.Успехов и вдохновения на вашем пути!

Иногда стоит обернуться назад и посмотреть на мир разработки глазами новичка. В компании Progress мы часто используем Angular. Angular — это основная составляющая нашего веб-фреймворка Kendo UI, так же, как и фреймворка для мобильных приложений NativeScript. Поэтому у нас часто спрашивают, что такое Angular и как его использовать. Когда появился Angular? Кем он поддерживается? Почему мы используем Angular? Когда его лучше не использовать? В этой статье мы ответим на эти и некоторые другие вопросы. Мы рассмотрим, что являет собой Angular, как он появился и в каких случаях его лучше всего применять. После этого кратко рассмотрим несколько примеров того, как работают Angular-приложения. Но давайте все по порядку. Как же появился Angular? Angular появился как side project. В 2009 году Miško Hevery и Adam Abrons выпустили проект под названием <аngular />, чтобы помочь разработчикам, а также и дизайнерам создавать веб-приложения, используя простые HTML-теги. Имя “Angular” пошло от угловых скобок или “<>”, которые обрамляли все теги. Например, < div >, < span > и другие.  Miško рассказал о том, как возникла идея создать фреймворк в интервью 2013 года: “Мы хотели понять, можно ли упростить работу веб-дизайнеров, а не только разработчиков. Смогут ли они добавить еще больше HTML в свой код, чтобы превратить обычную статическую форму во что-то более стоящее, что можно отправить по емейлу. Идея заключалась в следующем: будь у вас небольшой бизнес, продающий пиццу или что-либо другое, то вы могли бы добавить простую систему заказа, используя необходимые теги, и они действительно отправляли бы письмо на сервер." Поскольку домен angular.com был занят – собственно, как и сейчас – создатели фреймворка переименовали Angular в GetAngular и выпустили небольшой сайт, на котором можно было узнать о всех фичах фреймворка. Домашняя страница Angular по состоянию на декабрь 2009 года (из Internet Archive).  Скоро Miško начал работать в Google, а в 2010 году занялся проектом Google Feedback. Miško убедил своего менеджера, Brad Green, переписать проект, используя его Angular. Оптимизация сроков и кода, которые показала команда в работе, помогли убедить Google в силе Angular. Brad Green и Miško Hevery показывают, как много времени и сил удалось сэкономить на проекте, используя Angular. Это скриншот презентации на конференции ng-conf 2014 keynote, которую стоит посмотреть, если вы хотите знать всё о происхождении Angular. Вскоре после успеха Google Feedback та же команда переписала open-source библиотеку и в мае 2011 года была выпущена версия Angular 1.0. В течение нескольких лет Angular стремительно набирал популярность, и сегодня Google заявляет, что более 1,5 миллиона разработчиков используют Angular. Что делает Angular? Angular — фреймворк JavaScript, который помогает разработчикам создавать приложения. Библиотека предоставляет множество фич, которые делают простые реализации сложных задач современных приложений, таких как привязка данных, маршрутизация и анимация. Angular также представляет ряд конвенций о подходах к разработке приложений. Это может быть очень полезно для больших команд, которые должны работать вместе на одном проекте. Angular - это одна из немногих библиотек JavaScript, которые обеспечивают обширный style guide с большим количеством наглядных примеров того, как вы можете писать свой код, используя этот фреймворк. Когда использовать Angular? Технически вы можете использовать Angular где угодно, но лучше всего он работает в нестандартных приложениях с данными. Если вы ознакомитесь с различными приложениями Angular, собранными на madewithangular.com, вы увидите реальные приложения, которые собирают данные из форм и работают с ними. Angular работает не только с формами. Разработчики создали множество игр при помощи Angular и такие сумасшедшие вещи, как приложения с дополненной реальностью. Однако, большинство туториалов и документации по Angular все равно содержат информацию о создании некоторых form-based приложений. Например, вы встраиваете документацию Angular в приложение, где вы создали героев и их список через форму. Окончательный результат демо-приложения Tour of Heroes из Angular документации. Angular хорош в form-based приложениях, он подходит для больших и сложных приложений. Angular - не самый простой и не самый маленький фреймворк JavaScript. Следовательно, если вы создаёте нечто небольшое, вам лучше подобрать для работы фреймворк попроще, например, jQuery. Angular хорошо подойдёт для разработчиков приложений в средних и больших командах. Если вы разрабатываете приложение самостоятельно, может показаться, что шаблонного кода и конвенций разработки в Angular намного больше, чем вам нужно. Angular также хорошо подходит для приложений, которые должны работать в нескольких средах разработки. Если приложение должно работать на веб, а также на Windows или Maс, вы можете придерживаться одного из многочисленных туториалов для запуска Angular-приложений с популярным Electron project. Если же у вас приложение, которое нужно запустить на веб, iOS или Android, можете использовать NativeScript для рендеринга вашего приложения в мобильной среде. В некоторых случаях вы даже можете распространять код через эти платформы, экономя ценное время разработки. Кто поддерживает Angular? Angular Core Team состоит из большого количества людей во всем мире и из сообщества Angular. При этом большая часть разработок Angular изо дня в день осуществляется сотрудниками Google. Примерно 20 сотрудников Google входят в Angular Core Team и все ТОП-разработчики проекта Angular являются сотрудниками Google. Следует отметить, что, несмотря на контроль Google над Angular, сам фреймворк по-прежнему много в чём зависит от усилий сообщества. Более двух тысяч человек внесли свой вклад в open-source репозиторий Angular, в общем доступе есть бесчисленные туториалы и guides, многочисленные компании предлагают обучение и набор инструментов для разработчиков. Если контроль над проектом принадлежит одной компании, это неплохо, так как снижает конфликтные вопросы при принятия нестандартных решений. Какую версию Angular мне лучше использовать? На данный момент существует две популярные версии Angular. Версия 1 доступна на https://angularjs.org/  и является обновлённой версией того Angular, что был представлен Miško и его командой в 2011 году. Другая популярная версия теперь называется просто Angular и доступна на https://angular.io/. Современный Angular – это полностью переделанная версия для новых браузеров, рабочих процессов и платформ разработки. Почти во всех случаях вам следует придерживаться последней версии Angular. В ближайшем будущем команда Angular будет стремиться поддерживать Angular 1, но нет никаких оснований полагать, что они будут поддерживать и более старые версии. Более того, Angular 1 не допускает использования библиотеки вне браузера, поэтому вы не можете воспользоваться такими библиотеками, как NativeScript для создания мобильных приложений. Как выглядит Angular-приложение? Теперь, когда вы имеете некоторое представление об Angular, давайте углубимся в код. Начнём с небольшого приложения “hello world”. Все приложения Angular начинаются с НТМL-страницы, которая выглядит следующим образом. В реальном приложении тег < script > внутри тега < head > может быть немного сложным, но в высокоуровневых приложениях он такой же, как и другие веб-приложениях – вы загружаете кусок JavaScript-кода в HTML-документ, и приложение работает.   Есть одна уникальная вещь в выше приведённом примере – элемент < my-app >. Вы не используете этот элемент регулярно в веб-приложении. Цель Angular – постоянно расширять словарь НТМL, позволяя вам определять собственные теги. Такие пользовательские теги называют компонентами, и вы можете определять их поведение в коде. Вот простейшая реализация элемента < my-app >: Есть несколько моментов, которые вам нужно знать, чтобы понять, что происходит в данном фрагменте кода. Первое – это код на TypeScript, а не на JavaScript. TypeScript может показаться вам пугающим, если вы не встречались с ним раньше, но его основы понять нетрудно. TypeScript – надстройка над JavaScript, то есть весь синтаксис JavaScript доступен на TypeScript. Кстати, весь приведённый выше синтаксис – import, export, @Component и остальные – это или нынешние фичи JavaScript, или те, что появятся в ближайшем будущем. Так что, когда вы учите TypeScript, вы изучаете будущее JavaScript. TypeScript, к тому же, отличается превосходной документацией, к которой вы можете обратиться в любое время. TypeScript был создан и поддерживается Microsoft. Он стал очень популярным за последние несколько лет, поэтому можете смело использовать его в разработке своих приложений. Он никуда не денется. Давайте еще раз посмотрим на TypeScript-код, определяющий компонент < my-app >: В Angular вы используете тег @Component, который известен как декоратор, чтобы отметить классы, которые учитывают элементы, которые могут быть использованы в вашей HTML-разметке. У вас есть возможность передавать свойства @Component для описания элемента.  Свойство selector определяет имя тега при вводе в HTML. Использование селектора < my-app > показывает Angular, что делать, когда он видит тег < my-app > в HTML. Свойство template контролирует, что HTML должен делать, когда используется компонент. Пример использования template: "< h1 >Hello World< /h1 >", тут видно, как Angular определяет, какие действия применять при < my-app > и почему это приложение представляет базовый тег < h1 > при предварительном просмотре в браузере.  Отображение базового примера “Hello World” в браузере. Зачем мне использовать Angular? Angular- не самый простой в мире фреймворк, и понадобится время, чтобы понять те концепции, на которых он построен. Но когда вы возьметесь за Angular, то сможете делать действительно крутые приложения, обходясь небольшим количеством кода. Например, вы хотите добавить привязку данных к предыдущему примеру. Для этого используется очень простой синтаксис. Хотите построить форму для запуска приложения? Хотите, чтобы эта форма имела валидацию данных и двустороннюю привязку? Для этого есть простой гайд. Ваше приложение слишком большое и вы хотите структурировать его? И для этого тоже создан гайд. Попали в модульное тестирование и хотите знать, как проверить код? Такая возможность тоже есть. Хотите добавить такие профессиональные виджеты, как диаграммы и графики? Kendo UI и похожие фреймворки упрощают добавление этих высококачественных компонентов пользовательского интерфейса. Пользуясь Angular, не рассчитывайте на простоту фреймворка, но будьте уверены в его невероятной надёжности и хорошей документации. Этот фреймворк прошёл не одно боевое испытание и заслужено используется миллионами разработчиков для написания крутых приложений. Сообщество Angular – огромное, и все хелпы легко найти в Google, Stack Overflow и по всему интернету. Ищите разработчика? Тысячи Angular девелоперов откликнутся на ваш запрос. Есть даже специальные рекрутинговые сайты. Я уже упоминал о том, что Angular – мультиплатформенный? Вернемся к нашему примеру Hello World. У вас уже есть начало для iOS и Android приложения – просто переключите элемент HTML на компонент, который NativeScript может отобразить в мобильной среде, как , например. Вот так примерно будет выглядеть код. А вот как этот код работает в нативных iOS и Android приложениях. Angular делает это и многое другое возможным. От создания потрясающих приложений до расширения мультиплатформенной разработки, Angular может стать отличным решением для вашего следующего проекта.   Если вы ищите больше информации о том, что может предложить Angular, начинайте изучать туториалы по быстрому старту работы с Angular и начинайте кодить. Если вы хотите использовать Angular для разработки мобильных приложений, посмотрите, как использовать его с NativeScript. Вы изучите один из самых популярных фреймворков JavaScript, когда будете знакомиться со столь популярным миром мобильной разработки. Оригинал статьи: http://linkis.com/telerik.com/7vemI

Введение Формы – не самая простая тема в изучении HTML. Перемещаться по странице с контентом – это одно, а вот заполнять поля формы – совсем другое. Вот почему хороша идея добавить несколько элементов к форме. Labels Все поля формы должны иметь уникальный слой. За это отвечает тег label, что в свою очередь связывается с элементом формы через атрибут for. <form>         <label for="yourName">Your Namelabel>         <input name="yourName" id="yourName"> Плюсом использования labels также есть то, что они кликабельны, делая активным текущее поле формы. Атрибуты name и id обязательны: name нужен форме для управления полем, а id - для связи label с ним. Группы элементов и их заголовки Можно сгруппировать несколько однотипных полей имен (полное имя, фамилия и тд.) или адресов (Адрес1, адрес2, регион, страна, индекс и тд.), используя тег fieldset. Тегом legend определяется оглавление сгруппированных объектов. <form action="somescript.php">         <fieldset>             <legend>Namelegend>             <p>First name                 <input name="firstName">p>             <p>Last name                 <input name="lastName">p>         fieldset>         <fieldset>             <legend>Addresslegend>             <p>Address                 <textarea name="address">textarea>p>             <p>Postal code                 <input name="postcode">p>         fieldset> Большинство браузеров по умолчанию отображает группу элементов в рамке с названием сверху слева. Конечно, при желании все изменяется при помощи CSS. Выбор варианта Элемент optgroup объединяет в группу варианты выбора. Также нужен атрибут label. Браузеры автоматически сделают выпадающие списки из таких групп. <select name="country">         <optgroup label="Africa">             <option value="gam">Gambiaoption>             <option value="mad">Madagascaroption>             <option value="nam">Namibiaoption>         optgroup>         <optgroup label="Europe">             <option value="fra">Franceoption>             <option value="rus">Russiaoption>             <option value="uk">UKoption>         optgroup>         <optgroup label="North America">             <option value="can">Canadaoption>             <option value="mex">Mexicooption>             <option value="usa">USAoption>         optgroup>     select> Поля доступа Поля форм (группы элементов) нуждаются в возможности доступа без использования указателей (мыши). На помощь приходят такие элементы, как tab stops и access keys. Атрибуты access key и tabindex добавляются в теги input и legend. <input name="firstName" accesskey="f" tabindex="1"> Источник: http://www.htmldog.com/guides/html/advanced/forms/

Введение Стало быть, Вы только начинаете делать таблицу. Возможно, даже слышали о таких тегах, как tr, td, th или table, использовали атрибуты colspan, а также rowspan. Вы можете сделать такой себе милый маленький столик из фанеры, но можете и не знать, как сделать обеденный стол из твердых пород дерева, застекленная столешница которого запросто выдержит вес немаленького слона. Столбцы наносят ответный удар Как правило, таблицы строятся исключительно строками, делая столбцы ненужными элементами. К счастью для тех, кто хочет работать именно со столбцами, есть замечательные теги - colgroup и col. Эти теги дают возможность сделать столбцы в таблице, как Вам угодно, что очень удобно, если нужно изменить выравнивание или, скажем, цвет определенного столбца. Иначе придется изменять отдельные ячейки. <table>     <colgroup>         <col>         <col class="alternative">         <col>     colgroup>     <tr>         <td>             This         td>         <td>             That         td>         <td>             The other         td>     tr>     <tr>         <td>             Ladybird         td>         <td>             Locust         td>         <td>             Lunch         td>     tr> table> В примере класс "alternative"> будет применяться ко второму столбцу  или же второй ячейке каждой строки. Иногда удобно использовать атрибут span. Теги rowspan и colspan с colgroup определяют количество строк, в которых нужно объединить столбцы. Запись: <colgroup span="2"> colgroup> - группирует первые два столбца. Пример: <table>     <colgroup>         <col>         <col span="2" class="alternative">     colgroup>     В этом примере класс "alternative" использовался в двух последних столбцах. Использование тега col не обязательное, если colgroup содержит в себе span. Название эпизода Кратко и понятно про названия таблицы. Элемент caption - название таблицы, должен сразу же быть после открытия тега table. <table>     <caption>         Locust mating habitscaption>     По умолчанию название отображается над таблицей, также можно использовать CSS (caption-side: bottom). Согласитесь, хорошо предсказывать результат. Если Вы хотите сделать таблицу элементом figure, то лучше использовать figcaption вместо тега caption. Шапки и подвалы Для работы с большими таблицами удобнее всего использовать thead, tfoot и tbody для разбивки на структурные элементы header, footer и body. Всегда thead нужно писать первым в HTML-коде, а вот tfoot браузеры опустят в нижнюю часть таблицы, даже если элемент стоит выше tbody (или нескольких tbody, всё зависит от Вашей фантазии). <table>     <thead>         <tr>             <td>                 Header 1             td>             <td>                 Header 2             td>             <td>                 Header 3             td>         tr>     thead>     <tfoot>         <tr>             <td>                 Footer 1             td>             <td>                 Footer 2             td>             <td>                 Footer 3             td>         tr>     tfoot>     <tbody>         <tr>             <td>                 Cell 1             td>             <td>                 Cell 2             td>             <td>                 Cell 3             td>         tr>             tbody> table> Источник: http://www.htmldog.com/guides/html/advanced/tables/

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