Операционная система Android Языки программирования Java и Kotlin. Принципы ООП Среда Android Studio и набор инструментов Android SDK Формат обмена данными JSON Архитектура REST API Реактивное программирование Библиотека Retrofit 2 Фреймворк Dagger 2 Данные и СУБД SQLite UI/UX дизайн Шаблоны проектирования Алгоритмы и структуры данных Unit тестирование Архитектурные шаблоны Git & GitHub Google Play Английский язык Как стать Android разработчиком? Итоги   Всем привет! С каждым годом смартфоны, планшеты и другие гаджеты приобретают все большую популярность. Нам уже трудно представить хотя бы один день без них. Каким образом мы так сильно приявязались к ним? Все дело в программном обеспечении, которое находит ключ к каждому из нас: общение (телефонная связь, видеозвонки, социальные сети), просмотр мультимедийного контента, прослушивание музыки, фото- и видеосъемка, игры на любой вкус и цвет, обучающие приложения и т. д. За всем этим стоят девелоперы, разрабатывающие программы, от которых тяжело оторваться. Каждое мобильное устройство работает с использованием одной из мобильных операционных систем. Cамыми популярными из них являются Android и iOS. В контексте данной статьи нас интересует именно первая ОС. Мы расскажем вам, какие инструменты используют разработчики в создании таких увлекательных приложений на Android и как стать специалистом в этой сфере. Но прежде хотим познакомить вас поближе с данной операционной системой. Уверены, что практически каждый ее использовал (а может, и сейчас ею пользуется), однако сейчас вы узнаете некоторые интересные факты об Android: Изначально Android разрабатывалась как ОС для фотоаппаратов. ОС Android основана на ядре Linux. Компания Samsung имела возможность приобрести стартап-компанию Android Inc. в 2004-м году, однако корейцы поставили под сомнение выгодность этого предложения. Через год корпорация Google купила Android Inc. не менее чем за $50 миллионов и смогла направить полученный потенциал в нужное русло. Число активированных устройств, использующих Android, более 2 миллиардов. Первая версия Android, как и первый пакет разработчика (SDK 1.0), вышла осенью 2008 года. Тогда эту ОС многие критиковали и не верили в успешность проекта. Google Карты вычисляют дорожные пробки на основе концентрации и скорости перемещения Android устройств. Android используется не только в смартфонах и планшетах, но также и в электронных книгах, наручных часах, фитнес-браслетах, игровых приставках, ноутбуках, нетбуках, смартбуках, очках Google Glass, телевизорах, бытовых роботах, научных аппаратах, компонентах исследовательских систем на базе гаджетов, компонентах IoT (Internet of Things — “интернет вещей”) и других устройствах.     Теперь перейдем ближе к сути. Андроид разработчик — это IT-специалист, который создает, поддерживает и совершенствует программное обеспечение для мобильных устройств, использующих популярную ОС Android. Вместе с этим он задействован в процессах поддержки, улучшения и обновления разрабатываемых продуктов. Если посмотреть на количество устройств, которые используют данную ОС, можно прийти к выводу, что разработчик под платформу Андроид — очень востребован в IT, а также имеет высокие доходы. Какие технологии использует в своей работе этот специалист?     Какие языки программирования и технологии используют Android разработчики Android Каждый Android девелопер обязан знать операционную систему, под которую разрабатывает софт, а также понимать назначение и жизненный цикл Android-компонентов. Чтобы создавать эффективные мобильные приложения, вы должны понимать все аспекты устройства и работы данной ОС. Java + ООП Java — это объектно-ориентированный язык программирования со строгой типизацией. Безусловно, в создании приложений под Андроид можно использовать другие языки (C#, C/C++, Python и прочие), однако, именно Java считается флагманским в Android разработке. Поэтому в данной статье мы будем делать уклон в Java-стек. Что являет собою этот язык? Не будем углубляться в его устройство, а скажем лишь, что все Java-приложения транслируются в специальный байт-код, выполняемый виртуальной машиной JVM (Java Virtual Machine), которая может быть установлена практически на любое устройство. Это делает программы, разработанные на Java, кроссплатформенными. Какими знаниями необходимо обладать? Прежде всего необходимо знать Java и владеть методологией объектно-ориентированного программирования (ООП). Если конкретизировать: Машинная математика, переменные и типы данных, условные конструкции, логические операции, циклические конструкции, методы, рекурсия, массивы, списки, обработка исключений, суперкласс Object, обобщения (Generics, дженерики), работа с памятью. Понимание и применение пакетов (Packages) в Java; ООП, понятия объектов и классов; Механизмы наследования, умение работать с интерфейсами; Коллекции и работа с ними; Параллелизм. Помимо теоретических знаний, новичок должен сформировать необходимые навыки написания кода. Для этого мы советуем вам как можно чаще практиковаться и решать прикладные задачки из интернета либо составленные самолично. Также, советуем использовать онлайн-тренажеры, например, интерактивный тренажер от ITVDN. С его помощью вы сможете потренироваться в кодинге на Java и проверить свои знания. Kotlin Молодой и перспективный язык программирования, который поддерживает как объектно-ориентированное, так и процедурное программирование. Отличается своей простотой, гибкостью, лаконичностью, и являет собой следующий этап развития Java. Kotlin-приложения компилируются в уже упомянутый JVM байт-код, что делает этот язык полностью совместимым с Java.  На конференции для разработчиков I/O 2017 компания Google расставила акценты в Android разработке, заявив, что язык программирования Kotlin отныне позиционируется как приоритетный язык для разработчиков приложений под ОС Android. Подкреплено это было тем, что теперь новые API и библиотеки будут выпускаться сперва под Котлин. Несмотря на возрастающую популярность данного языка и поддержку со стороны Google, Java не собирается уходить из мобильной разработки, удерживая там уверенные позиции и по сей день. Так что знание обоих языков будет предпочтительным для всех, кто собирается заниматься Андроид разработкой. В любом случае, зная Java, вы безпроблемно освоите и Kotlin. Все-таки классику надо знать и уважать. Среда Android Studio и набор инструментов Android SDK Android Studio — это интегрированная среда разработки (IDE) приложений под Android. В ней вы будете создавать проекты и работать над ними. В свою очередь, студия вам предоставит всевозможные удобности для облегчения разработки софта. Android Software Development Kit — кроссплатформенный комплект средств Android разработки, включающий в себя: отладчик, набор библиотек, телефонный эмулятор, набор документации по работе в данной среде и примеры приложений. Особенно интересен в этом перечне эмулятор — программа, которая создает виртуальный мобильный девайс, где можно тестировать написанные приложения и смотреть, как они будут выглядеть на том или ином Андроид-устройстве. JSON JSON (JavaScript Object Notation) — это общий формат обмена данными. Позволяет совершать обмен информацией между программными продуктами, написанными на разных языках. Таким образом, клиент, использующий Java, может легко передавать данные на сервер, который реализован с помощью Ruby/Java/PHP. REST API REST — популярный архитектурный стиль, содержащий определенные принципы организации взаимодействия приложения либо сайта с сервером через протокол HTTP. API — это прикладной программный интерфейс. С его помощью происходит определение, каким образом следует обращаться к программе и какие ответы она обязана предоставлять пользователям. К примеру, оплачиваете футболку в интернет-магазине или покупаете билет в кино — как только вы нажимаете соответствующую кнопку, подтверждающую ваши намерения на оплату, сайт соединяет вас с платежной системой с использованием API этой системы. Но даже если система не имеет никакой интеграции с другими, API все равно используется — для общения внутри системы.  RxJava Библиотека, которая позволяет реализовать принципы реактивного программирования для JVM. Используется для оперирования событиями и потоками данных, комбинируя лучшие идеи шаблонов проектирования Observer (Наблюдатель), Iterator (Итератор) и функционального программирования. В реальной жизни влияние реактивного подхода мы ощущаем, когда на нашем смартфоне высвечивается сообщение о новом посте человека, которого мы фолловим в социальных сетях или когда нам приходит уведомление о новом сообщении из мессенджера. То есть, вместо того, чтобы каждые 10 секунд лично перезагружать страничку объекта фолловинга или свой мессенджер, мы просто ожидаем уведомления о новом посте, занимаясь своими делами. Это очень полезная опция, позволяющая не только экономить наше время, но и упрощающая нагрузку на сервер. Куда без RxJava в мобильную разработку на Java? Retrofit 2 Популярная библиотека для сетевого взаимодействия — типобезопасный HTTP-клиент для Android и Java. Позволяет легко получить и загрузить JSON (либо иные структурированные данные) через веб-сервис на основе REST. Для работы с HTTP-запросами в Retrofit используется библиотека OkHTTP. Dagger 2 Фреймворк для работы с зависимостями в Java и Android. Позволяет уменьшить количество шаблонного кода, структурировать зависимости, упрощает работу при большом количестве зависимостей, а также позволяет делать код более читабельным. SQLite Structured Query Language (SQL) — декларативный язык структурированных запросов, разработанный для взаимодействия с базами данных. Особенностью SQL является то, что он лишь описывает необходимые компоненты и желаемые результаты, не указывая, как именно эти результаты должны быть получены. Любое ПО подразумевает работу с данными, будь то обыкновенная процедура приема данных от сервера (например, скачивание файлов) либо внесение в БД информации о новом пользователе, который только зарегистрировался — умение работать с данными одинаково важно во всех сферах разработки. Исключением является только FrontEnd. Также, изучите одну из систем управления базами данных (СУБД). В Андроид разработке по умолчанию используется SQLite. Благодаря своей компактности, легкости и надежности, эта СУБД идеально подходит для разработки в электронных устройствах и программах, где стратегическое значение имеет оперативная память. XML Extensible Markup Language - расширяемый язык разметки, с помощью которого можно структурировать и хранить данные для удобства их дальнейшей обработки. XML хорошо масштабируем, сочетает в себе простой и удобный синтаксис, а также базируется на кодировках Юникод для представления содержания документов. Также, в Андроид разработке XML используется для создания интерфейса посредством объявления элементов пользовательского интерфейса и задания их расположения. UI/UX дизайн UI/UX (User Interface — “интерфейс пользователя”, User eXperience — “опыт пользователя”) дизайн — это проектирование различных пользовательских интерфейсов, в которых удобство использования (UX) настолько же важно, как и внешний вид (UI). Android девелопер в ходе создания приложений также занимается и разработкой внешнего вида приложения, а потому, должен знать, как реализовывать интерфейс, который принесет юзеру максимальный комфорт во всех аспектах использования. Обычно в UI/UX разработке под Андроид используют Material Design — стиль графического дизайна интерфейсов программного обеспечения и приложений, разработанный компанией Google, делающий уклон на естественность графической составляющей. Для работы необходимо использовать инструменты Material Components for Android.  Шаблоны проектирования Паттерны (они же шаблоны) являют собой архитектурные конструкции, описывающие общепринятые способы решения задач, которые часто возникают в ходе проектирования программного обеспечения. Всего существует более двух десятков шаблонов, однако разработчику нет необходимости владеть ими всеми. Достаточно изучить самые популярные. Алгоритмы и структуры данных Понимание алгоритмов и структур данных — обязательное требование, которому должен соответствовать каждый программист. Это необходимый фундамент, который учит разработчика писать хороший исходный код через подбор оптимальных формы представления информации и последовательности действий. Изучив структуры данных, вы будете уметь управлять уровнем сложности своих программ, делая их более доступными для понимания, а также разрабатывать приложения с высокой производительностью, которые будут рациональнее взаимодействовать с памятью. Знание алгоритмов позволит вам создавать сложные конструкции для эффективного решения широкого спектра задач на Java и Kotlin. Unit тестирование Вид тестирования, который берет на себя программист, а не тестировщик. Его основная идея заключена в написании тестов под каждую нетривиальную функцию либо метод. Цель Unit (модульного) тестирования — изоляция отдельных частей программы, чтобы продемонстрировать, что по отдельности они являются работоспособными. Таким образом происходит проверка кода на регрессию, а вместе с этим — соответствующее обнаружение ошибок. Архитектурные шаблоны В зависимости от предпочтений работодателя, от вас могут потребовать знание одного или нескольких архитектурных паттернов. Это шаблоны наивысшего уровня, которые определяют архитектуру всей программной системы. Самыми популярными являются MVC (Model-View-Controller), MVVM (Model-View-ViewModel), MVP (Model-View-Presenter), Clean Architecture. Git & GitHub Git — это популярная система контроля версий, позволяющая вести историю разработки проекта с возможностью доступа к каждой сохраненной версии. Одним из самых известных антагонистов Git является SVN — централизованная система, в отличие от децентрализованной Git. Также, в работе вам пригодится и сервис онлайн-хостинга проектов, использующий систему контроля версий. В данном случае это GitHub. В паре с Git он позволяет разработчикам сохранять свой код онлайн, а затем взаимодействовать с другими разработчиками в разных проектах. Данные системы позволяют команде программистов работать над одним проектом одновременно, сохраняя внесенные изменения, а также отслеживать выполнение задач каждым членом группы. Google Play Магазин приложений, в котором можно размещать и скачивать приложения под Андроид. Умение его использовать — обязательно. Google Play имеет очень строгий набор политик, которым должно соответствовать ваше приложение. К слову, за аккаунт Android разработчика необходимо один раз раскошелиться на $25. Зато это дешевле, чем за аккаунт iOS девелопера — там с вас будут брать дань каждый год денежную сумму в размере $99.  Английский язык Наверное, единственный язык, которым обязаны владеть все разработчики без исключения. Его вы будете использовать во время поиска ответов как во время учебы, так и во время работы, ведь большинство новых сведений о технологиях, курсы, учебные и справочные материалы появляются в первую очередь на английском. Для работы в команде разработчиков обычно знаний языка на уровне чтения технической документации и комментирования кода вполне достаточно, однако если вы планируете вести переговоры и переписку с иностранным заказчиком, ваш уровень должен быть выше.   Как стать Android разработчиком   Как вы заметили, Android девелоперы должны знать множество различных технологий. Сейчас очень много разработчиков данного направления, но действительно хороших очень мало. Поэтому и требования к кандидатам высоки. Если вы пройдетесь по ресурсам поиска работы, то наверняка отметите, что вакансий Android Developer уровня Junior не так много, как хотелось бы, а потому за место под солнцем придется побороться. Давайте перейдем к советам касательно того, как сделать старт в Андроид разработке и начать “набирать массу”. В университетах никто не обучит вас искусству разработки на Android, поэтому вы можете: Учиться самостоятельно — по книгам или видео курсам. Записаться на соответствующие курсы для максимально эффективного обучения специальности. Второй вариант является лучшим, поскольку предусматривает более высокий уровень дисциплинированности на всем пути обучения, а также структурированную подачу необходимой информации, которой удобно пользоваться и которая отвечает современным требованиям рынка. Если вы выбираете обучение по видео курсам, то прежде всего определите подходящую для вас образовательную онлайн-платформу. Мы рекомендуем сделать выбор в пользу ITVDN. Почему именно эта платформа? Давайте мы познакомим вас с преимуществами обучения на ITVDN. ITVDN — образовательная онлайн-платформа, содержащая полноценные программы обучения по 12 самым популярным специальностям. В каталоге ITVDN свыше 180 видео курсов по различным языкам программирования и информационным технологиям. Учебная программа каждой специальности содержит:  тщательно подобранный пакет видео курсов; план обучения с нуля до уровня специалиста, который вы можете адаптировать под свой уровень; Интерактивный Тренажер навыков для формирования навыков написания кода; учебные материалы, исходники программного кода, опорный конспект, презентации к урокам; доступ к Форуму, где каждый учащийся может общаться с другими студентами, тренерами и единомышленниками; возможность персональной консультации с тренером согласно выбранному пакету подписки; возможность проходить тестирование для подтверждения знаний, полученных в результате прохождения видео курса; электронный сертификат об окончании курса после успешного завершения тестирования. Все видео курсы записываются опытными разработчиками, которые проходят соответствующую сертификацию, чем подтверждают свое мастерство владения той или иной технологией. Наши преподаватели работают в IT и в курсе всех современных тенденций в своей сфере разработки. Знакомство со специальностью мы рекомендуем начать с просмотра бесплатных вебинаров по специальности Android Developer, в частности, с одноименного вебинара Евгения Мыцы Как стать Android разработчиком, в котором отражены все самые актуальные тренды и требования. Если вы заинтересованы в изучении специальности Android Developer на ITVDN, у нас есть отличное предложение для вас. Наш образовательный портал содержит полноценную программу обучения Android разработке. Переходите по ссылке и делайте шаг навстречу желаемой профессии!  Какой бы способ обучения вы не выбрали — вначале нужно изучить язык программирования Java и довести владение им до высокого уровня. После каждой пройденной темы нужно решать практические задачи, чтобы закрепить полученные знания. В этом вам может помочь интерактивный тренажер от ITVDN, с помощью которого вы сможете проверить ваше владение навыками написания кода на Java. Продолжайте обучение и изучайте те технологии, которые мы перечислили в данной статье. Очень желательно, чтобы у вас был наставник, который мог бы следить за вашим прогрессом, отвечать на возникающие вопросы, давать полезные советы. Это может быть как преподаватель на ITVDN, так и один из ваших знакомых, который занимается Андроид разработкой и готов взять под свое крыло юного протеже. Знание английского на уровне не ниже Intermediate обязательно. Оно вам понадобится для комфортного поиска информации по Java, Kotlin и другим технологиям в интернете. Если ваши знания английского недостаточны как минимум для чтения технической литературы — обязательно подтяните их при помощи различных курсов либо интернет-материалов свободного пользования. Изучите Git, начните делать свой небольшой проект и опубликуйте его на GitHub — это даст вам ценный опыт работы с распределенной системой управления версиями и позволит проверить свои навыки в решении реальной задачи. Несколько хороших проектов, и полноценное портфолио готово. Не забывайте о Google Play, ведь именно сюда Android разработчики выкладывают готовый к использованию продукт. Актуальную информацию касательно языков и технологий, которыми необходимо владеть Android разработчику, вы можете узнать из нашего вебинара “Как стать Android разработчиком”, перейдя по ссылке. Резюмируя Android разработчик — специалист, который занимается созданием ПО под различные устройства — смартфоны, планшеты, ноутбуки, нетбуки и прочие девайсы, в основе которых лежит ОС Android. Востребованность этого разработчика очень высока, а на настоящих профессионалов то и дело ведут охоту HR-ы и рекрутеры. Изучайте все необходимые языки и технологии, практикуйтесь, а также всегда подпитывайте интерес к вашей будущей профессиональной деятельности. Не забывайте следить за новостями в мире Android. Просматривайте в YouTube видео, посвященные данной сфере разработки и впитывайте новую информацию. Для дополнительных очков мотивации подпишитесь на известных Андроид девелоперов. Пробуйте посещать различные мероприятия, посвященные разработке под Андроид, находите единомышленников и поддерживайте активность в их среде. Главное — быть целеустремленным и иметь желание развиваться в IT-сфере. Не останавливайтесь ни перед чем и тогда вас обязательно настигнет успех! Желаем вам побед в обучении! Обогащайтесь новыми знаниями и скиллами на ITVDN!

Что такое адаптивная верстка? Преимущества мобильного адаптивного дизайна Почему адаптивный дизайн важен для бизнеса Как создать адаптивный дизайн Плавающая Сетка (Fluid Grid) Гибкий текст и изображения Медиа-запросы Пользовательское тестирование адаптивных сайтов Браузерное и устройство-зависимое тестирование на адаптивный дизайн Вдохновение от других адаптивных сайтов Будущее адаптивного дизайна для мобильных устройств Является ли ваш сайт Mobile-Friendly? Подводя итоги От редакции ITVDN Еще в 2015 году Google внедрил изменения в алгоритмы своей поисковой системы, которые теперь учитывают адаптированность сайта под мобильные устройства как важный пункт при ранжировании сайта. Дата была удачно названа Мобилгеддон (Mobilegeddon), как сравнение с Армагеддоном. Одно только такое введение требований от поисковиков к наличию мобильной версии сайта может оправдать важность адаптивного дизайна. Проще говоря, веб-сайт должен быть удобным для просмотра на смартфоне. Требования к адаптивной верстке включают в себя такие элементы дизайна, как: читаемый текст без необходимости его увеличения; достаточное количество места для целей касания (tap targets); отсутствие горизонтальной прокрутки. На сегодня уже почти 4 миллиарда пользователей используют смартфоны для серфинга в Интернете. Веб-сайты, не оптимизированные для всех небольших экранов смартфонов, имеют рейтинг в поисковых системах ниже тех, что выполнены адаптивно. Более 50% поисковых запросов в Интернете теперь происходит с мобильного устройства. Чтобы ваш веб-сайт мог работать с карманными устройствами (не создавая отдельное приложение), вам для начала стоит признать – адаптивная вёрстка важна для пользователей смартфонов. Давайте рассмотрим более детально, почему и как это происходит. Прежде всего ... а что такое адаптивная верстка и мобильный дизайн, и почему вы вообще должны о них заботиться?   Что такое адаптивная верстка? Адаптивный веб-дизайн (RWD - Responsive web design) создает систему, позволяющую одному сайту (с одним URL-адресом и одним источником контента) реагировать и адаптироваться к размерам устройства пользователя. Адаптивный веб-сайт создан с использованием верстки с гибким макетом, который подстраивается под размеры экрана устройства. По-сути, благодаря адаптивной верстке, ваш веб-сайт будет отлично выглядеть и хорошо работать как на настольном компьютере (или ноутбуке), так и на планшете, и в браузере мобильного телефона. В прошлом разработчики создавали более одного сайта, для соответствия страниц экранам разных размеров. С учетом того, что на рынке сегодня представлено много типов устройств, это кажется совершенно неэффективным… верно? Сам термин «адаптивная верстка» был фактически придуман в 2010 году веб-дизайнером Итаном Маркоттом. Сегодня адаптивная верстка в веб-дизайне уже не новая тенденция, а скорее проверенный временем способ мышления, стоящий за созданием сайтов. На сегодня наличие адаптивного веб-сайта больше не является еще одной возможностью для развития вашей инфраструктуры — это уже необходимость! Преимущества мобильного адаптивного дизайна Преимущество адаптивного макета номер один— это получение гарантии того, что любой пользователь на любом устройстве будет иметь наилучшие возможности взаимодействия с контентом на вашем сайте. Адаптивная верстка веб-сайта также является отличным способом улучшить контент на вашем сайте. Вы сможете убедиться, что те, кто использует мобильное устройство, видят всю важную информацию. Благодаря особенностям алгоритма Google, адаптивный веб-дизайн повышает видимость сайта в поисковых системах, поскольку он удобен для просмотра на мобильных устройствах. Сайт с качественным представлением контента на мобильном устройстве будет находиться в результатах поиска выше, чем сайт, хорошо отображающий контент только на десктопах.   Почему адаптивный дизайн важен для бизнеса Расширяется охват клиентов благодаря захвату пользователей небольших устройств (планшетов и смартфонов); Постоянный опыт работы с широкой аудиторией, который может увеличить количество потенциальных клиентов, продажи и конверсии; Аналитика, отслеживание и отчетность по версиям сайтов для десктопов и мобильных устройств могут быть в одном месте; Затраты времени и стоимость управления контентом снижается; Более 60 % запросов в Google на конец первого квартала 2019 делаются с мобильных устройств. Обратите внимание, что есть еще два способа, с помощью которых можно обеспечить взаимодействие пользователя с сайтом через мобильные приложения. Первый называется динамическим показом (Dynamic Serving), в котором используется один и тот же URL-адрес, но разные коды HTML и CSS. Страницы распознают устройство, на котором они просматриваются, и предоставляют соответствующий код. Второй способ — это вообще отдельный мобильный сайт. Когда пользователи посещают сайт с мобильного устройства, они отправляются на другой - мобильный URL-адрес. Вам следует выяснить, какой вариант лучше всего подходит для вашего присутствия в Интернете, прежде чем остановиться на одном. Учтите, что на Google ежедневно приходится более 5,6 миллиардов поисковых запросов. Рекомендуемая Google конфигурация для сайтов, оптимизированных для смартфонов, - это сайты с адаптивным веб-дизайном. Google даже предлагает тест на адаптивность сайта под мобильные устройства, чтобы вы могли увидеть, насколько легко посетитель может использовать вашу страницу на мобильном устройстве. Вы просто вводите URL страницы и получаете оценку. Как создать адаптивный дизайн Как сделать адаптивную верстку? Есть несколько моментов, о которых стоит подумать при создании адаптивного макета. Это процесс, который требует определенной системы проектирования и иерархии контента среди различных устройств. Три основных компонента адаптивного веб-дизайна включают в себя: Гибкая (плавающая) сетка - fluid grid; Гибкий текст и изображения; Медиа-запросы. Рассмотрим каждый из этих элементов детальнее.   Плавающая Сетка (Fluid Grid) Сетка является ключевым элементом для создания адаптивного макета. На сегодня сетки уже не являются чем-то новым. Веб-дизайнеры использовали сетки для создания веб-сайтов с самого начала. Однако в прошлом эти сетки имели фиксированную ширину и не позволяли поддерживать плавную компоновку. Гибкая сетка, используемая для адаптивных веб-сайтов, обеспечит вам гибкость и масштабируемость дизайна. Элементы будут иметь постоянный интервал, пропорции и смогут настраиваться на определенную ширину экрана в процентах. Гибкий текст и изображения Способ отображения текста зависит от того, на каком устройстве пользователь просматривает ваш сайт. Однако текст должен оставаться читаемым, несмотря ни на что. На адаптивных веб-сайтах есть возможность увеличить размер шрифта и высоту строки (расстояние между каждой строкой текста) для удобочитаемости. Гибкий текст и изображения настраиваются в пределах ширины макета, в соответствии с иерархией содержимого, заданной с помощью CSS (таблицы стилей). Текст на сайте с адаптивной версткой теперь может быть разборчивым независимо от устройства конечного пользователя. Благодаря гибкому контейнеру (внутри сетки) текст может переноситься с увеличением размера шрифта на небольших устройствах. Гибкие изображения могут оказаться более сложными из-за времени загрузки в небольших браузерах устройств. Но эти изображения могут масштабироваться, обрезаться или исчезать в зависимости от того, какой контент необходим для мобильных устройств. Медиа-запросы Медиа-запросы - это код, который обеспечивает гибкость макета на адаптивных веб-сайтах. Медиа-запросы определяют код CSS, который будет применен соответственно, в зависимости от размеров и ориентации устройства (например, книжная ориентация iPhone или альбомная ориентация iPad и т. д.). Медиа-запросы допускают существование несколько макетов дизайна, которые будут использовать одну и ту же HTML-кодированную веб-страницу. Все три указанных элемента являются основой адаптивной верстки. Однако есть и другие важные средства, которые могут помочь определить акценты и усовершенствовать адаптивный веб-дизайн ваших сайтов для мобильных устройств. Обратите внимание на: Пользовательское тестирование адаптивных сайтов Информация о том, как пользователи взаимодействуют с вашим сайтом, - бесценна и точно стоит того, чтобы заплатить за ее получение. Существует множество способов провести пользовательское тестирование, чтобы получить максимально полезную обратную связь. Такие сайты, как UserTesting.com, предоставляют пользователям тестирование за небольшую плату или бесплатно. Различные методы, такие как тестирование in-the-wild и карточная сортировка (Card Sorting), также могут помочь обнаружить неожиданные болевые точки и слабые места в использовании вашего продукта.   Браузерное и устройство-зависимое тестирование на адаптивный дизайн Убедитесь, что ваш адаптивный дизайн и верстка совместимы со всеми соответствующими браузерами и сохраняет целостность вашего пользовательского опыта и дизайна. Не полагайтесь только на изменение размеров окна браузера при тестировании адаптивного веб-дизайна для мобильных устройств. Попробуйте просмотреть сайт на как можно большем количестве физических устройств. Вы будете удивлены тем, что можно обнаружить при переходе от одной операционной системы к другой, от одного устройства – к другому.   Вдохновение от других адаптивных сайтов Точно также, как и выполняя любой другой дизайн-проект, обратитесь к опыту других людей. Найдите другие адаптивные веб-сайты, которые творчески обыгрывают концепцию адаптивного веб-дизайн. Задумайтесь над следующими вопросами: Какие веб-сайты или приложения вы часто используете на своем мобильном телефоне или других портативных устройствах? Почему вы предпочитаете один сайт другим, которые могут предоставлять аналогичные услуги? Предпочитаете ли вы использовать их на смартфоне или на настольном компьютере? Поиск ответов на эти вопросы может помочь вам найти слабые места, которые вы, возможно, никогда не замечали, во время ежедневного использования своего вебсайта. Будущее адаптивного дизайна для мобильных устройств Мы знаем, что Google требует следующих оптимизированных элементов для эффективного взаимодействия с пользователями мобильных интерфейсов, используя адаптивный веб-дизайн: Текст, с читаемым размером без необходимости его принудительного увеличения; Контент, который умещается на экране устройства, без необходимости горизонтальной прокрутки; Ссылки и кнопки, расположенные на достаточном расстоянии друг от друга, чтобы не было затруднений в работе с интерфейсом; Разумное время загрузки страниц; Не используйте Flash! Эти правила адаптивной верстки очень важно соблюдать. Рост числа мобильных устройств — это только начало перехода к более удобному использованию Интернета. Нужно быть уверенными, что пользователи могут просматривать ваш сайт в любом месте на любом устройстве, самые разнообразные мобильные носимые устройства становятся все более популярными. Важным моментом будет учитывать современные размеры гаджетов, чтобы понимать в вашей адаптивной верстке какие разрешения учитывать. К примеру, на 2019 год все еще лидирующим остается разрешение экранов - 360х640. Является ли ваш сайт Mobile-Friendly? Пройдите тест Google, чтобы узнать, насколько адаптирован ваш сайт для мобильных устройств. Ваш сайт получил зеленый свет? Отлично, значит вы прошли тест Google на адаптивность. Вы уже прочитали выше причины, почему адаптивный дизайн важен для пользователей вашего сайта. Вместо зеленого видите большие красные иксы? Значит вам следует начать предпринимать определенные шаги для оптимизации работы вашего сайта под пользователей мобильных устройств. Помните, что изменения в алгоритмах Google и требованиях к адаптивному дизайну в настоящее время мало учитывают планшеты, но, если вы сделаете ваш сайт полностью адаптивным - вы будете впереди тех конкурентов, которые этого еще не сделали!   Подводя итоги Согласно требованиям сегодняшнего времени, ваш веб-сайт должен отлично выглядеть и хорошо работать как на настольном компьютере, так и на планшете, и в браузере смартфона. Адаптивный веб-дизайн может помочь вам достичь этого. В этой статье мы ответили на общий вопрос «что такое адаптивный дизайн?». Есть три компонента адаптивного веб-дизайна: плавающая сетка, гибкий текст и изображения и медиазапросы. Помните о важности адаптивного веб-дизайна для вашего бизнеса.  Выполнение вашего сайта по всем правилам адаптивной верстки поможет вам: Увеличить охват потребителей на всех устройствах; Поддерживать постоянный качественный пользовательский опыт, который увеличивает удержание аудитории на сайте; Консолидировать данные аналитики, отслеживания и отчетности; Сократить время и стоимость управления контентом; Конкурировать в своей отрасли с другими брендами. Google привлекает к коммерческим сайтам более 85% трафика мобильного поиска и рекомендует применять на ваших сайтах адаптивный дизайн. Поскольку адаптивный веб-дизайн удобен для мобильных устройств, он помогает улучшить видимость в поисковых системах, что, в свою очередь, может увеличить количество посетителей вашего сайта. Увеличение трафика приводит к лучшей генерации потенциальных клиентов, дополнительным конверсиям и увеличению продаж - три основные причины, по которым вам нужен адаптивный веб-дизайн!   От редакции ITVDN Мы с вами рассмотрели необходимость адаптивной верстки для каждого современного сайта. Такой подход является конкурентным преимуществом для компании из любой сферы бизнеса. Если говорить о разработчике, то навыки создания адаптивных web-сайтов будут существенным конкурентным преимуществом при поиске работы. Специальные знания и навыки вы можете получить, обучаясь по видео курсам ITVDN. В первую очередь это курсы: HTML5&CSS3 Advanced Практический курс по верстке лендинга Создание адаптивного сайта с Bootstrap 3 Также вам могут быть интересны другие курсы и технологии, которые входят в программу обучения по специальностям Верстальщик сайтов и FrontEnd разработчик. По материалам статьи за авторством Сони Грегори.

Готовы ли вы к внедрению инноваций в ваши веб-приложения в 2019 году? Представляем вам последние тренды веб-разработки, которым, безусловно, стоит следовать! Стандарты веб-разработки часто меняются быстрее, чем их успевают внедрять. Чтобы всегда быть на шаг впереди, важно сосредоточиться на тенденциях, методах и подходах, которые только набирают популярность. Мы проанализировали тренды в разных отраслях, чтобы сформировать этот окончательный список тенденций в веб-разработке на 2019 год. В качестве бонуса, вам также представлен топ лучших стеков веб-технологий, достойных вашего внимания в следующем году. Не будем тратить время на долгие вступления. Все тренды здесь:   Голосовой поиск В настоящее время мы наблюдаем начало эры голосового поиска. Каждый смартфон уже оснащен цифровым голосовым помощником (Siri для iPhone, Google Assistant для телефонов на базе Android). Более того, набирают популярность умные колонки с искусственным интеллектом. В чем причина такого внимания к голосовым интерфейсам? Простота использования. Голосовое общение - это то, что нам не нужно изучать. Таким образом, дети и пожилые могут взаимодействовать с голосовыми интерфейсами без каких-либо сложностей в  обучении. Доступность. Цифровые голосовые помощники уже стали привычной функцией смартфона. Интеллектуальные колонки пока не так распространены, но цена от 50 долларов - отличная предпосылка для экспансии. К 2020 году ожидается, что 50% всех поисковых запросов будут осуществляться посредством голоса. Внедрение голосового поиска сейчас является одной из основных тенденций в e-commerce. Тем не менее, это также применимо к любому другому бизнесу в Интернете. Если вы хотите, чтобы ваше веб-приложение было найдено, оптимизируйте его для работы с голосовым поиском как можно скорее. Также мы рекомендуем рассмотреть возможность разработки собственного приложения для умных колонок. Это даст вам еще один канал для формирования лояльной аудитории и увеличения продаж.   WebAssembly   При создании веб-приложения производительность приложения обычно является компромиссом с кроссплатформенностью. Ограничения JavaScript делают тяжелые вычисления медленными, и это существенно влияет на производительность для пользователя. Именно поэтому большинство популярных игр и мощных приложений доступны только в качестве десктопного приложения. Формат WebAssembly может быть применен, чтобы изменить эту ситуацию. Этот новый формат ориентирован на нативную производительность среди веб-приложений. С помощью WebAssembly, код на любом языке программирования может быть скомпилирован в байт-код, который запускается в браузере. Код WebAssembly выполняется быстрее, чем код на JavaScript. В результате использования WebAssembly, вы сможете писать критически важные для приложения части на наиболее подходящем языке (C / C ++ / C # / Rust / Kotlin и т. Д.). WebAssembly сам позаботится о выполнении кода в браузере. Нативные приложения теперь можно запускать сразу в браузере. Это означает доступ к большему количеству пользователей, благодаря предложенной им сопоставимой с десктопной производительностью в сети без дополнительных затрат на разработку! Основная проблема с WebAssembly заключается в том, что еще не все браузеры поддерживают его. Однако скоро это изменится. Веб-приложения становятся более мощными с WebAssembly. Эту технологию определенно стоит попробовать. Машинное обучение в веб-разработке Технологии искусственного интеллекта, включая машинное обучение, уже давно влияют на наше поведение в Интернете, хотя, зачастую, это происходит незаметно для нас. Это основной момент применения машинного обучения – улучшение взаимодействия пользователя с приложением. Машинное обучение - это способность программного обеспечения повышать производительность без непосредственного участия разработчиков. По сути, программное обеспечение анализирует входящие данные, выявляет закономерности, принимает решения и улучшает свою работу. К примеру, компания Airbnb применила машинное обучение для настройки результатов поиска потенциальными гостями мест поселения. С помощью специфического алгоритма, компания хотела повысить вероятность того, что владелец жилья примет запрос от потенциального гостя. Алгоритмы машинного обучения должны были анализировать решения о принятии запросов каждого владельца. Пользуясь итогами такого анализа, компания смогла предоставить клиентам результаты поиска, которые стали полезными им с большей вероятностью. A / B-тестирование показало увеличение конверсии на 3,75%. В результате все запросы от пользователей Airbnb теперь обрабатываются в соответствии с этим алгоритмом, который повышает удовлетворенность клиентов и увеличивает доход. Отличный пример внедрения, не правда ли? Но это еще не всё! Применение естественного языка и распознавания изображений могут улучшить общие впечатления пользователя от использования сервиса. Машинное обучение позволяет компьютеру правильно интерпретировать данные и принимать обоснованные решения. Машинное обучение уже используется в веб-приложениях в различных отраслях, таких как здравоохранение, финансы, образование, сельское хозяйство и т. д. Эта технология предлагает существенные усовершенствования, которые было бы трудно достичь без технологий ИИ. Машинное обучение становится важной частью любого веб-сервиса. Важно, чтобы и вы попробовали найти применение для этой технологии в своих сервисах! Анализируйте поведение посетителей вашего веб-сайта и настраивайте под них отображаемый контент. Они никогда не узнают, что вы применяете к ним некий алгоритм, но их возросшая удовлетворенность контентом приведет к увеличению их вовлеченности и к увеличению конверсии! Машинное обучение может стать вашим секретным оружием, чтобы переиграть ваших конкурентов!   Безопасность данных Чем больше данных обрабатывает ваше веб-приложение, тем больше оно привлекает внимание киберпреступников. Они стремятся нарушить работу ваших сервисов и украсть данные ваших пользователей или внутреннюю информацию компании. Это может дорого обойтись и вам, и вашей репутации. Безопасность вашего веб-сервиса должна стать вашим главным приоритетом. Итак, чтобы сохранить пользовательские данные в 2019 году, следуйте этим советам: Никогда не пренебрегайте тестированием безопасности. Тестирование безопасности должно проводиться уже на этапе разработки, благодаря чему оно может предотвратить утечку данных. Каждое изменение в вашем веб-приложении должно быть явно протестировано. Используйте инструменты мониторинга сайта. Алгоритмы анализа поведенческих факторов помогут вам постоянно отслеживать все запросы, а также выявлять и квалифицировать подозрительные действия. Своевременное выявление угрозы позволит вашей команде вовремя среагировать и защитить веб-приложение от преступников. Тщательно выбирайте сторонние сервисы. Программное обеспечение SaaS (англ. software as a service — программное обеспечение как услуга, прим. переводчика) становится все более популярным, поскольку делает разработку приложений проще и быстрее. Однако вы должны убедиться, что поставщик услуг, с которым вы работаете, заслуживает доверия. Шифрование конфиденциальных данных. Даже если преступник сможет получить доступ к вашей базе данных, он не сможет извлечь какую-либо пользу из конфиденциальных данных, хранящихся там в зашифрованном виде.     Блокчейн в веб-разработке Несмотря на то, что блокчейн утратил часть доверия к себе из-за нестабильности обменных курсов криптовалют, мы должны признать - эта технология уже бесповоротно вошла в нашу жизнь. И хотя эта технология впервые была применена в сфере настольных компьютеров - блокчейн уже уверенно проникает и в WEB. Blockchain кошельки переместились с нативных настольных приложений в веб-приложения. Они идеально подходят для хранения небольших сумм криптовалют и предлагают улучшение удобства использования. Поскольку популярность веб-кошельков продолжает расти, вам следует рассмотреть и применение этой сферы технологий. Другая реализация технологии блокчейна называется dapps или децентрализованные приложения. Уникальная особенность таких приложений - хранение логики сервера и базы данных в блокчейне. В результате ни одна организация не может контролировать приложение (например, Facebook, Google и т. д.). Dapps изначально работали как настольные приложения. Но в настоящее время они тоже переходят в WEB. Во всем мире сеть стремится к децентрализации, поэтому популярность dapps, скорее всего, возрастет. Ethereum, самая популярная платформа с открытым исходным кодом для блокчейн-проектов, выпустила библиотеку JavaScript web3.js. Эта библиотека позволяет легко разрабатывать клиентов, которые взаимодействуют с блокчейном Ethereum различными способами, такими как: создание интеллектуальных контрактов, запись и чтение данных из смарт-контрактов, передача криптовалюты между двумя учетными записями и многое другое. Библиотека Web3 также доступна для других языков программирования, включая Python, Java, PHP, Swift, Scala и т. д. Таки образом создание децентрализованных приложений с удобными веб-интерфейсами становится проще. Очевидно, что пик ажиотажа вокруг технологии блокчейна уже прошел. Но это значит только, что пришло время приступить к серьезной разработке мощных решений, которые смогут использовать большинство преимуществ этой технологии. Может быть, именно ваш проект станет следующим ньюсмейкером?     Прогрессивные веб-приложения (PWA) и ускоренные мобильные страницы (AMP) Google отдает приоритет тем веб-приложениям, которые быстро загружаются на мобильных устройствах. Именно поэтому вам следует рассмотреть возможность внедрения PWA или AMP, которые являются уникальными технологиями, сокращающими время загрузки веб-страницы. Прогрессивное веб-приложение (PWA) - это веб-страница, которая воспроизводит привычный мобильный интерфейс. Это технология работает быстро, может работать как постоянно онлайн, так и с плохим подключением к интернету, и является относительно дешевой. PWA поддерживает взаимодействие, позволяя пользователям наслаждаться высококачественными возможностями приложений, даже не осознавая, что они используют их через браузер. Приложения E-commerce являются частым примером использования этой технологии. Ускоренная мобильная страница (AMP) работает только для статического контента, но загружается быстрее, чем обычный HTML. AMP пропускает все модные элементы и отображает только важную информацию - текст, изображения и т. д. Этот подход отлично подходит для блогов и новостных изданий. Нужно ли вам применять PWA или AMP, зависит от вашего конкретного случая. Тем не менее, вам следует начать рассматривать эти технологии прямо сейчас. Наряду с улучшением качества предоставляемой услуги, у вас есть шанс значительно поднять свой рейтинг в результатах поиска.     Интернет вещей Какие устройства вы в основном используете для доступа в интернет? Скорее всего, это ноутбук и смартфон. Тем не менее, сегодня подключаться к Интернету может гораздо большее количество устройств. Да, мы имеем в виду Интернет вещей или IoT, для краткости. В настоящее время многие устройства оснащаются экраном. Благодаря такой тенденции, веб-приложения, оптимизированные для отображения данных на смарт-часах, холодильниках, интеллектуальных колонках и т. д., станут более востребованными. Адаптированность к мобильным интерфейсам больше не является трендом, уже являясь обязательным элементом работы приложения. Тенденция 2019 года - адаптация веб-приложений для маленьких экранов. Motion UI Motion Design - один из главных трендов веб-дизайна будущего года. Минималистичный дизайн, в сочетании со сложными взаимодействиями, выглядит стильно и привлекает внимание пользователя. Переходы в хедере страницы, удобные подсказки, анимированные диаграммы, фоновая анимация и модульная прокрутка. Эти, и многие другие элементы, помогут вам отобразить свой уникальный стиль и завлечь пользователя, улучшая поведенческие факторы и помогая вашему веб-приложению занять более высокое место в результатах поиска.     Стэк технологий для разработки веб-приложений   Крайне важно работать с последними проверенными технологиями. Таким способом вы сможете гарантировать, что разработанное программное обеспечение соответствует требованиям рынка и остается актуальным в течение нескольких лет. А вот и самые популярные технологии 2019 года:   Технологии front-end   Ангуляр Впервые мы услышали об AngularJS в 2010 году. Уже через 6 лет, в 2016 году, фреймворк был полностью переписан и вышел под названием Angular 2. На конец 2018 года последней стабильной версией является Angular 7. Angular - это фреймворк Model-View-Controller (MVC). Три отдельных компонента позволяют писать хорошо структурированный и простой в поддержке код. Двунаправленная привязка данных удобна для простых приложений - любые изменения в модели будут немедленно внедрены в представление и наоборот. Однако если вы работаете над сложным проектом, однонаправленная привязка данных сэкономит ваше время и ресурсы. Чтобы использовать Angular максимально эффективно, вам придется использовать Typescript. Вам также следует помнить, что фреймворк работает только с обычным DOM, что создает некоторые ограничения. Стек MEAN – является одним из самых популярных. Он включает в себя: MongoDB - база данных; Express.js - веб-фреймворк; Angular – фронтэнд фреймворк; Node.js – бэкенд. Очевидным преимуществом этого стека является то, что все его компоненты используют JavaScript. В результате собрать команду разработчиков (или нанять одного разработчика full-stack JavaScript) не будет проблемой.   React.js В описанном стеке Angular часто заменяется на React - библиотеку Javascript. Стек MERN является относительно молодым, но растущая популярность React поспособствовала быстрому росту его популярности. React превосходит по своим возможностям Angular благодаря виртуальному DOM, который позволяет быстрее и проще вносить изменения. Однако, поскольку React является библиотекой, а не фреймворком, что ограничивает основные функциональные возможности, разработчикам приходится работать со сторонними сервисами. Также стоит упомянуть, что React использует JSX - модификацию JavaScript, которая обеспечивает бесшовную совместимость компонентов. Таким образом, знание JSX является предпочтительным, если вы хотите максимально использовать стек MERN и особенно React.   Vue.js Vue.js является более молодым JS фреймворком, но за последние несколько лет он продемонстрировал невероятный рост популярности. Частично это связано с тем, что это облегченное решение. По сравнению с монолитом, подобным Angular, он предлагает только базовую функциональность «из коробки». Используя сторонние сервисы, эта функциональность расширяется. В результате нет необходимости обрабатывать избыточный код, как в случае с Angular. Как вы, вероятно, догадались, Vue.js также используется вместе с MongoDB, Express.js и Node.js как часть стека MEVN.     Технологии Back-end: Как правило, сложно выбрать между пользовательской конфигурацией бэкенд разработки и backend-as-a-service. Оба варианта имеют свои плюсы и минусы, и выбор зависит от деталей проекта. Мы не будем сейчас вдаваться в подробности, так как существуют отдельные статьи, сравнивающие mBaaS и пользовательский бэкенд - ознакомьтесь с ними, чтобы узнать больше по этой теме. Здесь мы рассмотрим самые популярные решения для пользовательского бэкенда.   Node.js Node.js является важным компонентом всех вышеописанных стеков веб-разработки. Это среда выполнения приложений, которая используется для создания приложений на стороне сервера. Работа с Node.js требует знания JavaScript. По этой причине он часто используется в стеках вместе с инфраструктурой внешнего интерфейса JS.   Django Django - это веб-фреймворк Python. Он может использоваться в основном с любым фронтенд фреймворком (включая описанные выше). Он также является хорошим решением для любых типов веб-сайтов из-за множества доступных сторонних пакетов. С ростом популярности Python стоит рассмотреть Django для серверной части вашего веб-приложения.   Laravel PHP -  широко используемый язык программирования бэкенда, а Laravel - один из самых популярных PHP фреймворков. Laravel отлично работает с Vue.js. Тем не менее, Angular и React также хорошо подходят для разработки веб-приложений с Laravel.   Заключение Попытки угнаться за последними трендами могут показаться излишне сложными, так как тренды меняются очень быстро. Но почему бы не попробовать? Следуя последним тенденциям в веб-разработке, вы сможете порадовать своих пользователей контентом мирового уровня, повысить рейтинг ваших веб-приложений и открыть для своих услуг новые рынки! В течение следующих нескольких лет голосовой поиск укрепит свои позиции и заставит поставщиков услуг адаптироваться к новой реальности. Подходя к этому с умом, вы можете оказаться в числе первых компаний, которые обращаются к вашим клиентам с помощью голосового поиска. Звучит заманчиво, не правда ли? Безопасность пользовательских данных уже давно вызывает сомнения. Это проблема, которой нельзя пренебрегать, если вы хотите быть лидером рынка. Блокчейн - это технология со многими приложениями в веб-разработке, так почему бы не исследовать ее возможности на ранней стадии ее появления? Говоря в общем, каждый тренд 2019 года заслуживает вашего внимания. Некоторые из них будут актуальными в течение нескольких лет, а некоторые станут обыденностью уже через несколько месяцев. Так что не стесняйтесь начинать реализовывать их как можно скорее. Автор: София Меренич, технический и бизнес писатель. Источник

В этой статье мы расскажем о нововведениях в языке C# 7.0, которые были представлены в марте 2017 года как часть релиза Visual Studio 2017. В C# 7.0 появился целый ряд нововведений и основное внимание уделяется использованию данных, упрощению кода и улучшению производительности. Возможно, самой главной особенностью являются кортежи, которые упрощают получение различных результатов, и сопоставление с шаблоном, что упрощает код, который зависит от формы данных. Существует также множество других нововведений, как значительных, так и не очень. Надеемся, что в совокупности они сделают ваш код более эффективным и точным, а вы при этом будете работать продуктивнее и останетесь довольны результатом. Если вас интересует процесс разработки, который привел к этому набору функций, вы можете найти заметки, предложения и множество обсуждений на эту тему на сайте C# language design GitHub. Если данная информация кажется вам знакомой, это только потому, что релиз предварительной версии состоялся в августе прошлого года. В окончательной версии C# 7.0 изменились некоторые детали, некоторые из них - из-за отличных отзывов на указанную ранее статью. Получайте удовольствие от C# 7.0 и удачного хакинга! Out переменные В более ранних версиях C# использование out параметров является не таким легким, как нам хотелось бы. Прежде чем вызвать метод с out параметрами, сначала необходимо объявить переменные, чтобы перейти к нему. Поскольку вы обычно не инициализируете эти переменные (они все равно будут перезаписаны методом), вы также не можете использовать ключевое слово var, но вам нужно указать полный тип: public void PrintCoordinates(Point p) { int x, y; // have to "predeclare" p.GetCoordinates(out x, out y); WriteLine($"({x}, {y})"); } В C# 7.0 мы добавили out переменные, что позволяет объявлять переменную прямо в точке, где она передается как out аргумент: public void PrintCoordinates(Point p) { p.GetCoordinates(out int x, out int y); WriteLine($"({x}, {y})"); }  Обратите внимание, что переменные находятся в области видимости в окружающем блоке, поэтому последующая строка может их использовать. Многие виды утверждений не устанавливают свою собственную область действия, поэтому out переменные, объявленные в них, часто вводятся в область видимости. Поскольку out переменные объявляются непосредственно в качестве аргументов для out параметров, компилятор может обычно указывать, каков должен быть их тип (если только не существует конфликтующих перегрузок), поэтому вместо типа можно использовать ключевое слово var: p.GetCoordinates(out var x, out var y);  Общим использованием out параметров является шаблон Try..., где логическое возвращаемое значение указывает на успех, а out параметры переносят полученные результаты: public void PrintStars(string s) { if (int.TryParse(s, out var i)) { WriteLine(new string('*', i)); } else { WriteLine("Cloudy - no stars tonight!"); } }  Мы также допускаем «сбрасывание» в качестве out параметров в виде «_», что позволит вам проигнорировать параметры, которые вам не нужны: p.GetCoordinates(out var x, out _); // I only care about x Соответствие с шаблоном В C# 7.0 вводится понятие шаблонов, которые являются синтаксическими элементами, позволяющими проверить соответствие значения определенной «форме» и извлечь информацию из значения, если такое соответствие имеется. Примеры шаблонов в C# 7.0: • Константные шаблоны c (где c – константное выражение в C#), которые проверяют, равняется ли переменная этой константе. • Шаблоны типа T x (где T – тип и x – идентификатор), которые проверяют, имеет ли переменная тип T, и если да, то извлекают значение в новую переменную x типа T. • Var шаблоны var x (где x – идентификатор), которые всегда совпадают и просто помещают значение ввода в новую переменную x с тем же типом. Это только начало; шаблоны являются новым типом элемента языка C#, и в будущем мы обязательно добавим новые шаблоны в C#. В C# 7.0 мы улучшаем две существующие языковые конструкции с шаблонами: • is теперь может использоваться не только с типом, но и с шаблоном; • case в операторе switch теперь может использовать шаблоны, а не только константы. В будущих версиях C#, вероятно, мы добавим больше мест, где можно использовать шаблоны. Шаблоны с is Рассмотрим пример использования is с константным шаблоном и шаблоном типа: public void PrintStars(object o) { if (o is null) return; // constant pattern "null" if (!(o is int i)) return; // type pattern "int i" WriteLine(new string('*', i)); } Как видно из примера, переменные шаблона, представленные шаблоном, аналогичны out переменным, описанным ранее, поэтому могут быть объявлены в середине выражения и использоваться в ближайшей окружающей области. Также как out переменные, переменные шаблона изменяемы. Мы часто ссылаемся на out переменные и переменные шаблона совместно как «переменные выражения». Шаблоны и Try-методы часто используются вместе: if (o is int i || (o is string s && int.TryParse(s, out i)) { /* use i */ } Шаблоны с выражениями switch Мы обобщаем варианты использования switch: • Вы можете использовать любой тип (не только простые типы). • Шаблоны могут использоваться в выражениях case. • Вы можете добавлять дополнительные условия к выражениям case. Вот простой пример: switch(shape) { case Circle c: WriteLine($"circle with radius {c.Radius}"); break; case Rectangle s when (s.Length == s.Height): WriteLine($"{s.Length} x {s.Height} square"); break; case Rectangle r: WriteLine($"{r.Length} x {r.Height} rectangle"); break; default: WriteLine(""); break; case null: throw new ArgumentNullException(nameof(shape)); } Существует несколько особенностей, которые следует отметить в этом новом расширенном выражении switch: • Порядок выражений case теперь имеет значение: как и в случае с выражениями catch, у выражений case выбирается первое по порядку выражение, удовлетворяющее условию. Поэтому важно, чтобы условие квадрата было перед условием прямоугольника. Кроме того, как и в случае с выражениями catch, компилятор поможет вам пометить явные недостижимые условия. До этого вы не могли определить порядок выполнения, так что это не является нарушением существующего поведения. • Условие по умолчанию (default) всегда вычисляется последним: несмотря на то, что после него идет условие null, условие default будет проверено после него. Это сделано для совместимости с существующей семантикой. Однако, как правило, вы помещаете условие default  в конце. • Условие null в конце достижимо, потому что шаблоны типов следуют примеру текущего is  и не срабатывают для null. Это гарантирует, что null значения не будут случайно сопоставлены с первым шаблоном типа; вы должны явно указать, как им управлять (или оставить логику для условия default). Переменные шаблона, объявленные ключевым словом case..., находятся в области видимости только в соответствующем разделе switch. Кортежи Обычно хочется вернуть несколько значений из метода. Все доступные варианты в существующих версиях C# являются менее оптимальными: • Out параметры: использование является неэффективным (даже при использовании рассмотренных нововведений) и они не работают с асинхронными методами. • System.Tuple <...>: выглядит многословным для использования и требует выделения кортежного объекта. • Специальный вид переноса для каждого метода: слишком много кода для типа, единственной целью которого служит временная группировка нескольких значений. • Анонимные типы, возвращаемые через тип возврата dynamic: потери в производительности и отсутствие проверки статического типа. Для упрощения этой задачи в C# 7.0 были добавлены кортежи и литералы кортежей: (string, string, string) LookupName(long id) // tuple return type { ... // retrieve first, middle and last from data storage return (first, middle, last); // tuple literal }  Теперь метод эффективно возвращает три строки, объединенные как элементы кортежа. Вызывающий код метода получит кортеж и может индивидуально иметь доступ к элементам: var names = LookupName(id); WriteLine($"found {names.Item1} {names.Item3}."); Имена полей Item1 и т. д. являются именами по умолчанию для элементов кортежа и могут использоваться всегда. Но они не очень наглядны, поэтому вы можете добавить лучшие имена: (string first, string middle, string last) LookupName(long id) // tuple elements have names Теперь получатель этого кортежа имеет более описательные имена для дальнейшей работы: var names = LookupName(id); WriteLine($"found {names.first} {names.last}."); Вы также можете указать имена элементов непосредственно в литералах кортежей: return (first: first, middle: middle, last: last); // named tuple elements in a literal Как правило, вы можете назначать типы кортежей друг для друга, независимо от их имен: при условии, что отдельные элементы будут присваиваемыми, типы кортежей могут свободно преобразовываться в другие типы кортежей. Кортежи – это типы значений, а их элементы – общедоступные изменяемые поля. Они имеют значение равенства, а это значит, что два кортежа являются равными (и имеют одинаковый хэш-код), если все их элементы попарно равны (и имеют одинаковый хэш-код). Это делает кортежи полезными для различных ситуаций, а не только для возвращения нескольких значений из метода. Например, если вам нужен словарь с составным ключом, используйте кортеж в качестве ключа, и все будет работать правильно. Если вам нужен список с несколькими значениями в каждой позиции, также используйте кортеж для корректной работы. Кортежи полагаются на базовые структурные типы, которые называются ValueTuple <...>. Если вы выявите модель, что еще не включает эти типы, вы можете вместо этого выбрать их с помощью NuGet: • Щелкните правой кнопкой мыши проект в обозревателе решений и выберите «Manage NuGet Packages…». • Выберите вкладку «Browse» и выберите «nuget.org» в качестве «Package source». • Найдите «System.ValueTuple» и установите его. Распаковка кортежей Еще один способ использования кортежа – это его распаковка. Объявление распаковки является синтаксисом для разделения кортежа (или другого значения) на его части и назначения этих частей по отдельности новым переменным: (string first, string middle, string last) = LookupName(id1); // deconstructing declaration WriteLine($"found {first} {last}."); В объявлении распаковки можно использовать ключевое слово var для отдельных переменных: (var first, var middle, var last) = LookupName(id1); // var inside Или даже поместить var перед скобками как аббревиатуру: var (first, middle, last) = LookupName(id1); // var outside Вы также можете распаковать в уже существующие переменные с помощью присвоения распаковки: (first, middle, last) = LookupName(id2); // deconstructing assignment Распаковка выполняется не только для кортежей. Любой тип может быть распакован, если у него есть метод распаковки (образец или расширение): public void Deconstruct(out T1 x1, ..., out Tn xn) { ... } Out параметры соответствуют значениям, которые будут присвоены в результате распаковки. (Почему используются out параметры, а не кортежи? Чтобы можно было иметь несколько перегрузок метода с разным количеством параметров). class Point { public int X { get; } public int Y { get; } public Point(int x, int y) { X = x; Y = y; } public void Deconstruct(out int x, out int y) { x = X; y = Y; } } (var myX, var myY) = GetPoint(); // calls Deconstruct(out myX, out myY); Это будет обычный шаблон для создания «симметричных» конструкторов и методов распаковки таким способом. Так же, как и для out переменных, мы разрешаем «сбрасывать» в распаковке параметры, которые вам не нужны: (var myX, _) = GetPoint(); // I only care about myX Локальные функции Иногда вспомогательная функция имеет смысл только внутри одного метода, в котором вызывается. Теперь вы можете объявить такие функции внутри других функций как локальную функцию: public int Fibonacci(int x) { if (x < 0) throw new ArgumentException("Less negativity please!", nameof(x)); return Fib(x).current; (int current, int previous) Fib(int i) { if (i == 0) return (1, 0); var (p, pp) = Fib(i - 1); return (p + pp, p); } } Параметры и локальные переменные из области видимости доступны для локальной функции так же, как и для лямбда-выражений. В качестве примера рассмотрим методы, реализованные как итераторы, что обычно нуждаются в неитераторном методе-оболочке для точной проверки аргументов в момент их вызова (так как сам итератор не запускается, пока не будет вызван MoveNext). Локальные функции идеально подходят для этого сценария: public IEnumerable Filter(IEnumerable source, Func filter) { if (source == null) throw new ArgumentNullException(nameof(source)); if (filter == null) throw new ArgumentNullException(nameof(filter)); return Iterator(); IEnumerable Iterator() { foreach (var element in source) { if (filter(element)) { yield return element; } } } } Если бы Iterator был приватным методом рядом с Filter, то мог быть доступен для других членов в использовании напрямую (без проверки аргументов). Кроме того, необходимо было бы передавать все те же аргументы, что и Filter, вместо того, чтобы иметь их только в области видимости. Улучшения литералов В C# 7.0 появилась возможность добавлять «_» в качестве разделителя в числовые литералы: var d = 123_456; var x = 0xAB_CD_EF;  Вы можете поместить разделитель в любом месте между цифрами, чтобы улучшить читабельность. Они не влияют на значение. Кроме того, C# 7.0 представляет бинарные литералы, так что вы можете указывать битовые шаблоны непосредственно вместо того, чтобы знать шестнадцатеричную систему наизусть. var b = 0b1010_1011_1100_1101_1110_1111;  Локальные переменные и возвращаемые значения по ссылке Теперь можно не только передать параметры в метод по ссылке в  С# (с помощью ключевого слова ref), но и возвратить данные из метода по ссылке, а также сохранить в локальной переменной тоже по ссылке. public ref int Find(int number, int[] numbers) { for (int i = 0; i < numbers.Length; i++) { if (numbers[i] == number) { return ref numbers[i]; // return the storage location, not the value } } throw new IndexOutOfRangeException($"{nameof(number)} not found"); } int[] array = { 1, 15, -39, 0, 7, 14, -12 }; ref int place = ref Find(7, array); // aliases 7's place in the array place = 9; // replaces 7 with 9 in the array WriteLine(array[4]); // prints 9 Очень удобно передавать ссылки на определенные места в больших структурах данных. Например, в игре информация содержится в большом заранее выделенном массиве структур (во избежание пауз на сбор мусора). Теперь методы могут вернуть ссылку непосредственно на одну из таких структур, с помощью которой вызывающий код может читать и изменять эту структуру. Существуют некоторые ограничения для обеспечения безопасности: • Можно возвращать только ссылки, которые возвращать безопасно: ссылки, переданные в метод и ссылки на поля объектов. • Локальные переменные инициализируются определенной ячейкой памяти и в будущем не меняются. Обобщенные типы асинхронных возвратов До сегодняшнего дня асинхронные методы могли возвращать только void, Task или Task. В C# 7.0 позволяется создавать типы, которые также могут быть возвращены асинхронным методом. Например, можно создать структуру ValueTask, которая поможет избежать создания объекта Task в случае, когда результат асинхронной операции уже доступен в ожидаемое время. Для многих асинхронных сценариев, например, где используется буферизация, такой подход может значительно уменьшить число выделений памяти и таким образом значительно повысить производительность. Конечно, можно придумать и другие ситуации, в которых task-подобные объекты будут полезны. Правильное создание таких типов не будет простой задачей, поэтому мы не ожидаем, что большое количество разработчиков будут создавать их. Однако мы полагаем, что они будут появляться в различных моделях и прикладных интерфейсах, и вызывающий код сможет просто использовать await, как сейчас для Task. Больше членов в виде выражений Методы и свойства в виде выражений используются в C# 6.0, но не все типы членов можно было так объявлять. В C# 7.0 к списку членов в виде выражений добавилась поддержка аксессоров, конструкторов и финализаторов: class Person { private static ConcurrentDictionary names = new ConcurrentDictionary(); private int id = GetId(); public Person(string name) => names.TryAdd(id, name); // constructors ~Person() => names.TryRemove(id, out _); // finalizers public string Name { get => names[id]; // getters set => names[id] = value; // setters } } Это пример функции, которая была предоставлена сообществом, а не командой компилятора Microsoft C#. Ура, открытый код! Throw выражения Выбросить исключение в середине выражения очень легко: достаточно вызвать метод, который это сделает! Но в C# 7 теперь можно использовать throw как часть выражения в определенном месте: class Person { public string Name { get; } public Person(string name) => Name = name ?? throw new ArgumentNullException(nameof(name)); public string GetFirstName() { var parts = Name.Split(" "); return (parts.Length > 0) ? parts[0] : throw new InvalidOperationException("No name!"); } public string GetLastName() => throw new NotImplementedException(); } Источник

Создания простого чата Для начала создадим простой чат с помощью HTML&CSS и PHP&MySQL Проектирование Базы Данных Переходим к phpMyAdmin. Создаем новую базу данных, называем “chatdb”. Создаем новую таблицу, называя “Posts”, включая в себя 4 столбца: “id” тип колонки INT, автоматическое увеличение на 1 (задаем A_I в ячейку с флажком) основной ключ (index); “nick” тип колонки VARCHAR и длина 100; “post_text” тип колонки TEXT; “post_dt” тип колонки DATETIME по умолчанию является CURRENT_TIMESTAMP. Создание веб-сайта. Во-первых, создадим главную страницу. Список комментариев и отправка формы, используя кнопку. Всё будет находится в файле “index.php” .  Давайте создадим этот файл и напишем что-то вроде этого:  <html> <head> head> <body> php $mysqli = new mysqli("127.0.0.1", "root", "", "chatdb"); /* "127.0.0.1" is MySQL host name. In local servers (XAMPP, Ampps, etc.) it is 127.0.0.1. If you using a dedicated hosting, see it in admin panel. */ /* "root" and "" is login and password for DB's user. In local servers usually default DB user is "root" with empty password. */ /* "chatdb" is DB's name. */ /* Warning: in XAMPP you should manually run MySQL server (from xampp-control.exe) to get it work. */ $result = $mysqli->query("SELECT * FROM posts;"); ?> <style> /* All CSS is very simplified. I provide it for example and no more.  * In Chrome it works tolerably, but in IE and Firefox it works very poorly.  */ .content {   display: table;   width: 50%;   min-width: 400px;   height: 80%;   /* Center horizontally and vertically */   position: absolute;   left: 0; right: 0;   top: 0; bottom: 0;   margin: auto;   /* Design */   border: 1px solid;   background-color: silver;   padding: 5px; } /* For mobile devices */ @media (max-width: 400px) {   .content {     width: 100%;     min-width: 0;     padding: 0px;   } } style> <div class="content"> <div id="comments" style="overflow-y: scroll; height: 100%;"> php if ($result) {   while ($post = $result->fetch_object()){     $nick = $post->nick;     $post_dt = $post->post_dt;     $post_text = $post->post_text;         echo "<b>$nickb> ($post_dt):<br>";     echo "$post_text<br>";     echo "<br>";   }   $result->close(); } ?> div> php $mysqli->close(); ?> <form action="post.php" method="post" style="height: 0; display: table-row;">   Nick:<br>   <input type="text" name="nick" style="width: 100%;">input><br>   <br>   Text:<br>   <textarea name="text" style="width: 100%;">textarea><br>   <br>   <input type="submit">input> form> div> <script type="text/javascript">     var divComments = document.getElementById('comments');     divComments.scrollTop = divComments.scrollHeight; script> body> html> 2. Дальше давайте создадим “post.php” файл и напишем такое:  php $nick = $_POST['nick']; $post_text = $_POST['text']; $mysqli = new mysqli("127.0.0.1", "root", "", "chatdb"); $nick = $mysqli->real_escape_string($nick); $nick = htmlspecialchars($nick); $post_text = $mysqli->real_escape_string($post_text); $post_text = htmlspecialchars($post_text); $mysqli->query("INSERT INTO posts (nick, post_text) VALUES ('$nick', '$post_text');"); $mysqli->close(); /* Redirect To Main Page */ header('Location: ' . $_SERVER['HTTP_REFERER']); ?> 3. Откроем ваш чат в любом продвинутом браузере. Вся работа:  4. Напишите ник и текст, а потом нажмите на кнопку отправки.  Когда отправили форму, сразу же происходит перенаправление формы главной страницы в “post.php”. “Post.php” моментально наполняет данными таблицу и перенаправляет на главную страницу. Также “post.php” содержит начальный XSS и SQL защищенный вход. Для упрощения не отправляем клиентам время с JS на “post_dt” на внесения данных, а указываем значение по умолчанию – CURRENT_TIMESTAMP, который предоставляет нынешнюю дату и время на сервер. Когда количество комментариев больше, чем экран может вместить, то комментарии   переполнены в div, используется вертикальный скроллбар. Во время загрузки страницы JS автоматически опускает скроллбар вниз к недавнему комментарию. Что тут не так? Проблема номер 1. Новый непрочитанный комментарий от пользователя не загружается в базу данных автоматически, без ручной перезагрузки страницы. Это очень, очень серьезная проблема для любого чата. Как это исправить? Очевидно, один из путей сделать это - использовать HTTP-запрос к фоновой работе автоматически (с помощью JS) и асинхронно, то есть это один из способов обеспечить выполнение AJAX в любой form. Проблема номер 2. Также неправильно то, что кнопка отправки перезагружает страницу (перенаправляет на вторую страницу и следующим шагом возвращает назад). При перезагрузке страницы сбрасывает “Nick” в  поле (также, как любые другие изменения, те, что сделали с пользователем) Как это исправить? Конечно, можно обеспечить выполнение обхода для сохранения изменений и перезагрузки на перезагружаемой странице. Но не эффективнее ли устранить причину, чем последствие? Можно только убрать перезагружаемую страницу и эта проблема будет решена автоматически. Проблема номер 2.1. Видите ли что-то необычное тут? Это слишком быстро? Дело с чатом очень простое – загружаем только два маленьких текстовых параметра. Что делать, если нужно улучшить чат с помощью добавления присоединения, а конкретно - изображений и видео? Видео может иметь объем в размере нескольких мегабайт, что тогда в этом случае? Давайте попробуем.  Давайте немного изменим “post.php”, после $mysql->query() добавив это:  for ($i = 0; $i < 1000000000; $i++) { } Старайтесь размещать какие-либо комментарии. Что мы видим? Нет, UI не остановилось (заморозилось), но браузер ждет до того, как закончится подключение:   Да, если “post.php” вызывает какую-то необработанную ошибку, то чат исчезает, и пользователь видит пустое окно с сообщением о непонятной ошибке. Чтобы вернуться к чату, пользователю стоит нажать кнопку “Back” в браузере. И это проблема номер 2.2. Давайте уберем петлю с “post.php” и исправим эти проблемы. Реализация легкого AJAX в простой чат Автоматическое обновление комментариев Эта веб-страница без AJAX? Это веб-страница, которая полностью перезагружается. Эта веб-страница c AJAX? Это веб-страница, что перезагружается частично. Где же взять части этих страниц? Стоит разделить нашу страницу на части, в этом случае сервер генерирует страницу частично. Страница будет состоять из двух частей – блок комментариев и другой контент страницы. Комментарии будут загружаться и перезагружаться отдельно от другой страницы. Давайте сделаем первую часть, то есть блок комментариев. Для начала создадим пустой файл, назовем “getcomment.php”. Дальше переходим в “index.php” для того, чтобы вырезать комментарии и далее отделить его. 1. Вырезаем инициализированный блок MySQL с “index.php"  php $mysqli = new mysqli("127.0.0.1", "root", "", "chatdb"); /* "127.0.0.1" is MySQL host name. In local servers (XAMPP, Ampps, etc.) it is 127.0.0.1. If you using a dedicated hosting, see it in admin panel. */ /* "root" and "" is login and password for DB's user. In local servers usually default DB user is "root" with empty password. */ /* "chatdb" is DB's name. */ /* Warning: in XAMPP you should manually run MySQL server (from xampp-control.exe) to get it work. */ $result = $mysqli->query("SELECT * FROM posts;"); ?> вставляем в “getcomments.php”. 2. Следующее, вырежем контент div c комментариями с “index.php”: php if ($result) {   while ($post = $result->fetch_object()){     $nick = $post->nick;     $post_dt = $post->post_dt;     $post_text = $post->post_text;         echo "<b>$nickb> ($post_dt):<br>";     echo "$post_text<br>";     echo "<br>";   }   $result->close(); } ?> И вставим (добавим) в “getcomments.php” после инициализации MySQL. 3. Дальше, вырежем недалекий блок MySQL с “index.php”: php $mysqli->close(); ?> Вставим его в конец файла “getcomments.php”. 4. Наконец-то, убираем JS-скрипт, который опускает скролл в самый низ. <script type="text/javascript"> var comments = document.getElementById('comments'); comments.scrollTop = comments.scrollHeight; script> Не переживай, это только временно. 5. Сделано. Теперь имеем что-то наподобие этого:  <html> <head> head> <body> <style> /* All CSS is very simplified. I provide it for example and no more.  * In Chrome it works tolerably, but in IE and Firefox it works very poorly.  */ .content {   display: table;   width: 50%;   min-width: 400px;   height: 80%;   /* Center horizontally and vertically */   position: absolute;   left: 0; right: 0;   top: 0; bottom: 0;   margin: auto;   /* Design */   border: 1px solid;   background-color: silver;   padding: 5px; } /* For mobile devices */ @media (max-width: 400px) {   .content {     width: 100%;     min-width: 0;     padding: 0px;   } } style> <div class="content"> <div id="comments" style="overflow-y: scroll; height: 100%;"> div> <form action="post.php" method="post" style="height: 0; display: table-row;">   Nick:<br>   <input type="text" name="nick" style="width: 100%;">input><br>   <br>   Text:<br>   <textarea name="text" style="width: 100%;">textarea><br>   <br>   <input value="Submit" type="submit">input> form> div> body> html> getcomments.php:  php $mysqli = new mysqli("127.0.0.1", "root", "", "chatdb"); /* "127.0.0.1" is MySQL host name. In local servers (XAMPP, Ampps, etc.) it is 127.0.0.1. If you using a dedicated hosting, see it in admin panel. */ /* "root" and "" is login and password for DB's user. In local servers usually default DB user is "root" with empty password. */ /* "chatdb" is DB's name. */ /* Warning: in XAMPP you should manually run MySQL server (from xampp-control.exe) to get it work. */ $result = $mysqli->query("SELECT * FROM posts;"); ?> Вероятно, теперь наша страница разделена. Давайте проверим её. Переходим http (точнее ССЫЛКА для локального сервера). Дальше, переходим на главную страницу, http:///index.php Это удивительно! Всё удачно получилось, разделив страницу на части за пару минут! Не останавливаемся на этом. Теперь “glue” эти части с помощью AJAX. Как это сделать? 1. Для начала стоит создать пустой JS-скрипт на главной странице: <script type="text/javascript"> alert('Test'); script> Добавив это после тега div, перед закрывающимся тегом . 2. Сделаем HTTP GET запрос от JS к “getcommet.php” Для этого используем XMLHtttpRequest (XHR) класс: <script type="text/javascript"> var xhr = new XMLHttpRequest(); xhr.open('GET', '/getcomments.php', false); xhr.send(null); if (xhr.status == 200) {   alert(xhr.responseText); } script> Это работает, но не читает старые версии IE те, что не поддерживают такую инициализацию. Для получения более кросс-браузерного пути переходим в и добавляем это: <script type="text/javascript"> function getXmlHttp(){   var xmlhttp;   try {     xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");   } catch (e) {     try {       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");     } catch (E) {       xmlhttp = false;     }   }   if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {     xmlhttp = new XMLHttpRequest();   }   return xmlhttp; }; script> И главный скрипт (в конце) <script type="text/javascript"> var xhr = getXmlHttp(); xhr.open('GET', '/getcomments.php', false); xhr.send(null); if (xhr.status == 200) {   alert(xhr.responseText); } script> Как видно, теперь JS получает контент со страницы “getcomments.php” и показывает это в предупреждении.   2.1. Вопрос: «Это на самом деле AJAX (Asynchronous Javascript And Xml)?» Это AJAX, потому что запрос сервера отформатирован в HTML (который основан на XML). Но действительно ли это AJAX, это асинхронно? Проверим. Добавим эти уже знакомые строки в любое место между в “getcomments.php”: for ($i = 0; $i < 1000000000; $i++) { } Что теперь видно на загружаемой странице? Вначале страница зависает, его замораживает UI (становится не реагирующим на нажатие левой/правой кнопки мыши): Дальше Chrome показывает навязчивое всплывающие окно, сообщающее об удалении страницы: Это не AJAX! Это JAX! Как его сделать асинхронным? К счастью, ХHR также поддерживает асинхронный режим: <script type="text/javascript"> var xhr = getXmlHttp(); xhr.open('GET', '/getcomments.php', true); /* true for asynchronous */ xhr.onreadystatechange = function() {   if (xhr.readyState == 4) {     if(xhr.status == 200) {       alert(xhr.responseText);     }   } }; xhr.send(null); script> В этом случае браузер не ждет ответа с главного потока пользовательского интерфейса, он запускает в другом (асинхронно) и вызываемым событием “onreadystatechange” в главном контексте UI.  Теперь всё в порядке, страница полностью доступна, пока запрос запущен, и после ответа получит предупреждение. for ($i = 0; $i < 1000000000; $i++) { } И продолжаем работу. 3. Добавляем этот контент в div  вместо предупреждения. Заменить это: alert(xhr.responseText);  C этим: var divComments = document.getElementById('comments'); divComments.innerHTML = xhr.responseText; Возвращаем назад, клиент видит “glued” страницу с блоком комментариев. 4. Дальше следует установить интервал для автоматической проверки новых комментариев время от времени… и также восстановить удаленный сценарий автоматической прокрутки.  <html> <head> <script type="text/javascript">     function getXmlHttp() {         var xmlhttp;         try {             xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");         } catch (e) {             try {                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");             } catch (E) {                 xmlhttp = false;             }         }         if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {             xmlhttp = new XMLHttpRequest();         }         return xmlhttp;     }; script> head> <body> <style> /* All CSS is very simplified. I provide it for example and no more.  * In Chrome it works tolerably, but in IE and Firefox it works very poorly.  */ .content {   display: table;   width: 50%;   min-width: 400px;   height: 80%;   /* Center horizontally and vertically */   position: absolute;   left: 0; right: 0;   top: 0; bottom: 0;   margin: auto;   /* Design */   border: 1px solid;   background-color: silver;   padding: 5px; } /* For mobile devices */ @media (max-width: 400px) {   .content {     width: 100%;     min-width: 0;     padding: 0px;   } } style> <div class="content"> <div id="comments" style="overflow-y: scroll; height: 100%;"> div> <form action="post.php" method="post" style="height: 0; display: table-row;">   Nick:<br>   <input type="text" name="nick" style="width: 100%;">input><br>   <br>   Text:<br>   <textarea name="text" style="width: 100%;">textarea><br>   <br>   <input value="Submit" type="submit">input> form> div> <script type="text/javascript">     var divComments = document.getElementById('comments');     function loadComments() {         var xhr = getXmlHttp();         xhr.open('GET', '/getcomments.php', true);         xhr.onreadystatechange = function () {             if (xhr.readyState == 4) {                 if (xhr.status == 200) {                     if (xhr.responseText !== divComments.innerHTML) {                         divComments.innerHTML = xhr.responseText;                         divComments.scrollTop = divComments.scrollHeight;                     }                 }             }         };         xhr.send(null);     };     loadComments();     setInterval(loadComments, 1000) script> body> html> Теперь проблема исправить это. Новые комментарии с другого пользовательского чата (другие вкладки браузеров, окон и экземпляров) получают каждые 1000 миллисекунды (1 секунду) автоматически. Но отправка комментариев уже вызывает перезагрузку нашей страницы. Отправка комментариев без перезагрузки Как написано выше, XHR помогает отправлять HTTP GET-запросы без перезагрузки страницы и GUI заморозки (асинхронно). Теперь отправляем HTTP-запрос асинхронно, но на этот раз POST запрос, а не GET. И, естественно, XHR позволяет это. Используем метод send(). Для GET указываем null. Для POST устанавливаем запрос “body”.Также нужно добавить “Content-Type:application/x-www-from-urlencoded” в header  для того, чтобы разрешить серверу знать, какой формат использовать для отправки данных. Заметка: если не знаете, что отправлять, то можно захватить регулярный запрос с помощью “Fiddler” или же любой другой HTTP-перехватчик и только просимулировать запрос. HTTP-перехватчик — это незаменимый инструмент для работы с HTTP/HTTPS. Это позволяет увидеть все headers и bodies по всем HTTP(S)-запросам, что отправляются в систему. Лучше использовать “Fiddler”, это бесплатное, современное и очень простое приложение, что может поддерживать HTTP/HTTPS и оба Win x86/x64. 1. Для начала создадим пустой JS скрипт в HTML. Разместить до самого тега, потому что этот скрипт будет использован для отправки формы комментария (форма будет вызывать этот скрипт при отправке).2. В этом скрипте, реализуем функцию, что будет отправлять ник и комментарии в “post.php”  <script type="text/javascript"> function postComment(nick, text) {   var xhr = getXmlHttp();   xhr.open('POST', '/post.php', true);   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');   xhr.onreadystatechange = function() {     if (xhr.readyState == 4) {       if (xhr.status == 200) {         /* it isn't required to add comment to DOM manually, it will done automatically on next refresh via AJAX */       }     }   };   xhr.send('nick=' + nick + '&text=' + text); /* joining the data in format simulates form */ }; script> 3. Следующие, перезагружая страницу при отправке:  ... onsubmit="return false;"> Также добавим вызов “postComment’s”: action="post.php" method="post" style="height: 0; display: table-row;" onsubmit="postComment(this.nick.value, this.text.value); return false;"> 4. Наконец, необязательно, но можно убрать “action” и “method” с формы:  <form style="height: 0; display: table-row;" onsubmit="postComment(this.nick.value, this.text.value); return false;"> 5. Результат: <html> <head> <script type="text/javascript">     function getXmlHttp() {         var xmlhttp;         try {             xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");         } catch (e) {             try {                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");             } catch (E) {                 xmlhttp = false;             }         }         if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {             xmlhttp = new XMLHttpRequest();         }         return xmlhttp;     }; script> head> <body> <style> /* All CSS is very simplified. I provide it for example and no more.  * In Chrome it works tolerably, but in IE and Firefox it works very poorly.  */ .content {   display: table;   width: 50%;   min-width: 400px;   height: 80%;   /* Center horizontally and vertically */   position: absolute;   left: 0; right: 0;   top: 0; bottom: 0;   margin: auto;   /* Design */   border: 1px solid;   background-color: silver;   padding: 5px; } /* For mobile devices */ @media (max-width: 400px) {   .content {     width: 100%;     min-width: 0;     padding: 0px;   } } style> <div class="content"> <div id="comments" style="overflow-y: scroll; height: 100%;"> div> <script type="text/javascript">     function postComment(nick, text) {         var xhr = getXmlHttp();         xhr.open('POST', '/post.php', true);         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');         xhr.onreadystatechange = function () {             if (xhr.readyState == 4) {                 if (xhr.status == 200) {                     /* it isn't required to add comment to DOM manually, it will done automatically on next refresh via AJAX */                 }             }         };         xhr.send('nick=' + nick + '&text=' + text);     }; script> <form style="height: 0; display: table-row;" onsubmit="postComment(this.nick.value, this.text.value); return false;">   Nick:<br>   <input type="text" name="nick" style="width: 100%;">input><br>   <br>   Text:<br>   <textarea name="text" style="width: 100%;">textarea><br>   <br>   <input value="Submit" type="submit">input> form> div> <script type="text/javascript">     var divComments = document.getElementById('comments');     function loadComments() {         var xhr = getXmlHttp();         xhr.open('GET', '/getcomments.php', true);         xhr.onreadystatechange = function () {             if (xhr.readyState == 4) {                 if (xhr.status == 200) {                     if (xhr.responseText !== divComments.innerHTML) {                         divComments.innerHTML = xhr.responseText;                         divComments.scrollTop = divComments.scrollHeight;                     }                 }             }         };         xhr.send(null);     };     loadComments();     setInterval(loadComments, 1000) script> body> html>  Теперь простая реализация AJAX подошла к концу. Это ещё не конец, это только начало. Есть ещё достаточно всего для изучения и улучшения.

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

Введение В  статье мы рассмотрим бесплатные инструменты для редактирования изображений, выбора цветов и шрифтов, работы с CSS, FTP и другие полезные сервисы. Благодаря их использованию дизайн Вашего веб-ресурса станет интереснее и привлекательнее. Pixlr Pixlr – мощное приложение для онлайн редактирования изображений. Оно проигрывает в функциональности Photoshop-у, но некоторые функции Pixlr впечатляют. Typetester Typetester – интерактивный сервис сравнения шрифтов. Он значительно облегчает подбор шрифтов веб-дизайнеру.  CSS Type Set CSS Type Set дает Вам возможность работать с текстом в интерактивном режиме и превращать его в CSS. net2ftp net2ftp – полнофункциональный FTP-клиент в браузере. Подходит также для iPhone. WhatTheFont WhatTheFont определяет шрифт по картинке или URL. Color Scheme Designer Color Scheme Designer недавно был обновлен. Разработан новый дизайн и система определения цветовой схемы. Fontstruct С FontStruct можно создавать уникальные шрифты из геометрических форм, расположенных в сетке. Kuler Kuler позволяет просматривать цветовые палитры, созданные другими пользователями. Можно также создать свою собственную палитру, используя цветовое колесо и цветовые ползунки. W3C Markup Validation Service The Markup Validator – бесплатный сервис по W3C. С его помощью можно проверить XHTML и CSS валидность веб-документов. ViewLikeUs ViewLikeUs позволяет проверить, как Ваш сайт выглядит в распространенных форматах разрешения.  ColoRotate Веселый сервис выбора цвета. Pingdom Tools Инструменты PingDom позволяют запускать тесты времени загрузки на веб-страницах. Они имитируют загрузку страницы в веб-браузере. Визуально показано время загрузки каждого объекта. Список объектов можно просмотреть или в порядке загрузки, или в виде визуальной иерархии. Источник: http://webdesignledger.com/tools/15-free-online-tools-for-web-designers-on-a-budget

Введение В данной статье сравнивается четыре самых популярных браузерных движка для WinForms, а именно WebBrowser, Gecko, Awesomium и OpenWebKitSharp. Исходники для работы: WebBrowser - 75.9 KB Awesomium - 16.7 MB GeckoFX - 9.9 MB OpenWebKitSharp - 24.6 MB     Небольшие сравнительные характеристики WebBrowser Стандартный браузерный движок .NET фреймворка. Ядро – MSHTML + Active-X, включающий в себя COM IWebBrowser2 MSHTML IWebBrowser2. Может использоваться для Winforms и WPF. Gecko Сторонний браузерный движок. Ядро – XULRunner, используемый в браузере Firefox. Имеет только поддержку Winforms. Awesomium WebControl Сторонний браузерный движок с настраиваемым внешним ядром. Ядро - .NET, WebKit. Поддерживается Mono, WPF и Winforms. OpenWebKitSharp Сторонний браузерный движок. Ядро – WebKit, используемый в браузерах Safari и Chromium (Chrome). Имеет только поддержку Winforms.   WebBrowser Gecko Awesomium OpenWebKitSharp Лицензия Бесплатная Бесплатная. Open-source: MPL 1.1/GPL 2.0/LGPL 2.1 Бесплатная, если Ваш проект имеет прибыть в $100 тис. (можно купить за $2900) Бесплатная Платформы Winforms, WPF Winforms Winforms, WPF, Unity, Mono, SDL Winforms Тип процессора Любой ? X86 ? Скорость загрузки страницы Низкая Средняя Высокая Высокая Требуемые размеры библиотеки DLL 0MB 22.4MB 40.5MB 64.6MB Остановка GUI при загрузке страницы Нет Нет Да Да Минимальная требуемая версия .NET .NET 2.0 или более ранняя .NET 2.0 или более ранняя .NET 4.0 ? Объект, метод, свойство модели - WebBrowser-identical Не WebBrowser-identical WebBrowser-identical, но многие методы и свойства не работают Использование контента DOM – set HTML Да Да Да Только с помощью JS Использование контента DOM – get HTML Да Да Да, но не работают с отключенным JS Только с помощью JS DOM – GetElementById Да Да Только с помощью JS ? DOM – GetElementsByClassName Только с помощью JS Да Только с помощью JS ? DOM – GetElementsByTagName Да Да Только с помощью JS ? Встраивание JavaScript Да Да Да Да Отключение JavaScript Нет Да Да ? Настройка прокси-сервера Нет Да Да ? Встроенный визуальный редактор HTML Да ? Нет Нет Проверка HTML синтаксиса Нет ? Да Да Встроенный менеджер загрузок ? ? ? Да Использование WebBrowser Встроенный визуальный редактор HTML webBrowser1.Document.DomDocument.GetType().GetProperty("designMode").SetValue (webBrowser1.Document.DomDocument, "On", null); Программная вставка HTML элемента  // appends: // //   //    src="http://dj9okeyxktdvd.cloudfront.net/App_Themes/CodeProject/Img/logo250x135.gif" /> //           var mylink = webBrowser1.Document.CreateElement("a"); mylink.Id = "mylink"; mylink.SetAttribute("href", "http://codeproject.com/"); var myimg = webBrowser1.Document.CreateElement("img"); myimg.Id = "myimg"; myimg.SetAttribute("src", "http://dj9okeyxktdvd.cloudfront.net/App_Themes/CodeProject/Img/logo250x135.gif"); mylink.AppendChild(myimg); webBrowser1.Document.Body.AppendChild(mylink); Выбор DOM элемента – GetElementById  var id = "mylink"; var el = webBrowser1.Document.GetElementById(id); if (el != null) {     MessageBox.Show("Element with id=\"" + id + "\" has innerHTML: " + el.InnerHtml); } else {     MessageBox.Show("Element with id=\"" + id + "\" not found."); } Выбор DOM элемента – GetElementsByTagName var tag = "img"; var elz = webBrowser1.Document.GetElementsByTagName(tag); if (elz.Count > 0) {     MessageBox.Show(elz.Count + " elements with tag <" + tag + "> found."); } else {     MessageBox.Show("No elements with tag <" + tag + "> found."); } Использование контента DOM – set HTML  webBrowser1.DocumentText = "<html><head><script>alert('check!'); script>head><body>lorembody>html>"; Встраивание JavaScript  var head = webBrowser1.Document.GetElementsByTagName("head")[0]; var scriptEl = webBrowser1.Document.CreateElement("script"); scriptEl.SetAttribute("text", "function sayHello() { alert('hello') }"); head.AppendChild(scriptEl); webBrowser1.Document.InvokeScript("sayHello"); Использование Gecko  Использование контента DOM – set HTML geckoWebBrowser1.Document.DocumentElement.InnerHtml = "<html><head>head><body> <a class=\"link\">fa>body>html>";  Выбор DOM элемента – GetElementsByClassName (geckoWebBrowser1.Document.GetElementsByClassName("link")[0] as     Skybound.Gecko.GeckoElement).InnerHtml = "tt"; Использование Awesomium WebControl  Использование контента DOM – set HTML webControl1.HTML = "<html><head><script>alert ('check!');script>head><body>lorembody>html>"; Использование контента DOM – get HTML  var allhtml = webControl1.ExecuteJavascriptWithResult     ("document.documentElement.outerHTML"); Встраивание JavaScript  webControl1.ExecuteJavascript ("document.body.innerHTML += 'Hello, World!';"); Отключение JavaScript  var ws = WebCore.CreateWebSession(new WebPreferences() { Javascript = true }); webControl1 = new Awesomium.Windows.Forms.WebControl() { WebSession = ws }; this.Controls.Add(webControl1); Настройка прокси-сервера  var ws = WebCore.CreateWebSession(new WebPreferences() { ProxyConfig = "255.255.255:8080" }); webControl1 = new Awesomium.Windows.Forms.WebControl() { WebSession = ws }; this.Controls.Add(webControl1); Использование OpenWebKitSharp  Использование контента DOM – set HTML webKitBrowser1.GetScriptManager.EvaluateScript("document.body.innerHTML='';"); Выводы В каждом движке есть свои + и –, с которыми можно столкнутся при разработке браузера. В любом случае, только Вам решать, какой из движков подойдет под Ваш стиль разработки. Источник: http://www.codeproject.com/Tips/825526/Csharp-WebBrowser-vs-Gecko-vs-Awesomium-vs-OpenWeb?PageFlow=Fluid

Введение Microsoft Azure является облачно-вычислительной платформой и инфраструктурой, предоставленной корпорацией Microsoft. Эта платформа выполняет такие функции, как построение, развертывания и управления приложениями и услугами, и они могут быть доступны по всему миру. Azure доступен как Платформа, как сервис (PaaS) и Инфраструктура, как сервис (IaaS). Чтобы сделать развертывание приложения.NET на Microsoft Azure, Visual Studio 2012 и Visual Studio 2013 предоставляет Вам необходимые инструменты. Вы можете загрузить полную версию Visual Studio 2013 года здесь. Чтобы использовать Azure, сначала нужно посетить сайт manage.windowsazure.com и подписаться на эту услугу. Вы также можете получить бесплатную пробную подписку, чтобы начать работу. После входа на портал, на следующем рисунке продемонстрированы некоторые службы/функции, которые можно получить: В этой статье мы будем использовать приложение, созданное с помощью Angular.js, MVC, WEB API для выполнения CRUD-операций. Мы будем публиковать приложения на Azure в качестве веб-сайта. Загрузите исходный код и откройте это приложение в Visual Studio 2013. Создание сервера базы данных с помощью SQL Azure Чтобы успешно запустить веб-сайт, Вы должны развернуть базу данных, используемую нашим веб-сайтом в облаке. Чтобы развернуть базу данных Azure, нужно создать сервер базы данных, используя Azure SQL. Шаг 1: Выберите SQL DATABASES, и Вы увидите страницы базы данных, как показано здесь: Выберите Servers, это позволит создать новую базу данных SQL SERVER. Нажмите кнопку  "CREATE A SQL SERVER DATABASE", ниже появится окно: Введите необходимые данные. После ввода данных выберите галочку в нижнем углу, чтобы создать базу данных сервера: Кликаем на кнопку "MANAGE" внизу страницы, это позволит Вам добавить сервер доступа в правила брандмауэра, так чтоб был получен доступ к приложению. Эти правила добавят IP-адрес вашей машины в правила брандмауэра. Чтоб узнать имя экземпляра сервера базы данных, кликаем по имени базы данных для отображения информационной панели. Прокрутите вниз страницы панели мониторинга для отображения MANAGE URL. Она начинается от https://.database.windows.net. Часть URL после https://, имя экземпляра базы данных. Шаг 2: Чтобы Соединиться с сервером базы данных, скопируйте часть URL после http://, и от локального экземпляра SQL Server, кликаем по Connect на объектном проводнике, и в Connect To Server окно вводит детали базы данных как показано здесь: Это выведет на экран Сервер базы данных Azure SQL экземпляр в объектном проводнике на локальном экземпляре SQL Server. Введите необходимые параметры. SERVICE TIERS позволит выбрать уровень базы данных, таких как BASIC | STANDARD | PREMIUM. Выберите уровень BASIC. Выберите SEERVER как сервер базы данных, его мы создали ранее. Создаваемая база данных будет такая, как показано на изображении: Кликните по кнопке MANAGE внизу страницы, она создаст правило Брандмауэра для того, чтобы установить доступ базы данных: Далее откроется следующая страница, где информация об Администраторе Базы данных обязательна к заполнению: Клик на Log On выведет на экран следующую страницу:  Кликните по “Design”, чтобы составить таблицы, Views и Stored Procedures. Кликаем по “New Table” и создаем список сотрудников, как показано: Введите простые записи в эту таблицу, используя ссылку New Query. Внесение изменений в Web.config файл MVC-приложения Откройте приложения MVC в Visual Studio 2013 и внесите следующие изменения в строку подключения. data source=; initial catalog=Application; user id=; password=; MultipleActiveResultSets=True; App=EntityFramework" "providerName="System.Data.EntityClient" />   (В качестве альтернативы Вы можете запустить Entity Framework в проект, в папку Models для создания строки подключения) Создание Веб-Сайта С Помощью Windows Azure Portal Нажмите кнопку на сайте, чтобы отобразить параметры создания веб-сайта. Нажмите на ссылку CREATE A WEBSITE. Это приведет к появлению следующих вариантов для создания веб-сайта:     Далее Вы можете ввести информацию о URL. Введённый URL уникальный и будет проверен Azure. Если это имя не будет корректное, то URL будет .azurewebsites.net. Центр обработки данных должен быть выбран согласно Вашему выбору. Как только Центр обработки данных выбран, тогда все другие ресурсы, необходимые веб-сайту, например, Базы данных SQL, должны быть размещены в том же Центре обработки данных, так как это поможет в управлении затратами. Как только будет создан Веб-сайт, портал покажет детали:     Чтобы получить детали о веб-сайте, кликните по его имени, ниже будет выведена инструментальная панель на экран, она поможет в управлении и мониторинге веб-сайта.     Чтобы опубликовать наш веб-сайт, созданный с помощью VS tools в Visual Studio, мы должны загрузить профиль публикации. Он может быть загружен и скачан по ссылке, как продемонстрировано на изображении. Публикация веб-сайта в Visual Studio Откройте SPA Application в Visual Studio 2013. Кликните правой кнопкой по названию проекта, чтобы вывести на экран контекстное меню Publish Option.     Эта опция выведет на экран следующее окно:     Данное окно имеет следующие параметры: Microsoft Azure веб-сайтов - поддержка прямого входа на Windows Azure на основе подписки. Import - позволяет импортировать веб-сайт и публиковать профиль, который загружается с портала Azure. Custom - позволяет создать новый профиль, публиковать для развертывания веб-сайта.   Нажмите на кнопку "Import" и будет отображено следующее окно для импорта профиля публикации:     После нажатия "OK", будет отображено следующее окно с деталями веб-развертывания:     Кликните “Next”. Так как мы уже развернули базу данных по Azure SQL, и последовательность подключений к базе данных уже обновлена в web.config файле, следующее окно покажет строку подключения:     Выберите “Далее”, чтобы отобразить список файлов, которые будут опубликованы:     Кликните по кнопке “Publish”, веб-сайт будет опубликован со всеми требуемыми ссылками.  Как только веб-сайт будет успешно опубликован, он может быть просмотрен.     Примечание: в этой статье не использовался CSS и, следовательно, неправильно расположение таблиц. Добавьте свои CSS, чтобы украсить страницу. Таким образом происходит развертывание веб-сайта на Azure. Источник: http://www.dotnetcurry.com/showarticle.aspx?ID=1064

Введение Много информации о Twitter Bootstrap в наши дни в мире веб-дизайна и программирования. Люди называют его благом для веб-разработчиков, это возможность проектировать с отсутствием знаний.  В большинстве сценариев веб-разработчиков имеется готовая идея, но невозможно приступить из-за отсутствия дизайн-проекта, над которым нужно работать. Они должны полагаться на дизайнеров, чтобы завершить клиентскую сторону своего проекта. Этот процесс является серьезной потерей времени для разработчика, для которого имеет значение, чтобы идея воплотилась в реальность как можно скорее. В таких сценариях Twitter Bootstrap приходит на помощь. Twitter Bootstrap – CSS фреймворк, он помогает в разработке веб-приложений. Он один из простых CSS фреймворков. Предполагается, что у Вас нет знаний в проектировании дизайна, все что Вам нужно - это написать немного HTML кода согласно спецификациям Bootstrap. В нем уже написаны для Вас CSS стили, также он имеет встроенную поддержку jQuery, и некоторые популярные инструменты JavaScript. Начинаем Чтобы приступить к использованию Twitter Bootstrap, Вам нужно скачать bootstrap.zip с официального сайта. Он содержит в себе набор файлов, а именно css, js и img, которые Вам понадобятся, чтобы начать создание веб-сайтов с Twitter Bootstrap. Папка “css” имеет таблицу стилей для адаптивного и неадаптивного дизайна. Она понадобиться для того, чтобы быстрее сделать сайт. Папка “js” имеет bootstrap.js. JavaScript файлы, которые содержат различные компоненты. В последней папке “img” содержится два набора одинаковых иконок, за исключением их фонового цвета. Изображения halflings были предоставлены glyphicons, и предоставляются бесплатно в проекте Twitter Bootstrap. До того, как приступить к работе, откройте Ваш текстовый редактор и создайте первый файл с именем “index.html”. Сохраните его в корневой папке Вашего проекта. Основной HTML шаблон для работы с Bootstrap Для активации Bootstrap фреймворк необходимо включить все нужные файлы и создать HTML-структуру. Сначала Вам необходимо построить структуру, а затем определить, какие файлы потребуются. Сперва, на что нужно обратить внимание, это то что HTML5 требует doctype: DOCTYPE html> Устанавливаем meta кодировку в utf-8, потому что в проекте потребуется использовать специальные символы, для того чтобы браузер правильно их отображал. Twitter Bootstrap также указывает на использование utf-8 в их документации для лучшей совместимости.  <meta charset="utf-8"> Когда Вы установите стандартные HTML-теги, такие как , и   Теперь Вам нужно перейти к подключению необходимых таблиц стилей bootstrap.css. <link rel="stylesheet" href="css/bootstrap.css" type="text/css"/> Теперь CSS готов, далее Вам необходимо включить все необходимые JavaScript файлы. Во-первых, необходимо включить файл jQuery, для этого подключим jQuery CDN.  <script src="http://code.jquery.com/jquery-1.10.1.min.js">script> Затем подключаем Bootstrap файл.   <script src="js/bootstrap.js">script> Все эти скрипты должны лежать чуть выше в конце тега . Наконец, закончили с процессом подключения всех необходимых файлов. Ваш index.html выглядит так.  Понимание того как это работает Во-первых, Вам нужно помнить, что Twitter Bootstrap во многом зависит от 12 сеток. Итак, о каких сетках идет речь? Предположим, Вы хотите две большие равные части внутри body в вашей странице index.html. Вы должны передать класс “span6” для каждого элемента div. Это говорит о том, что Bootstrap сделает две равные части, которые должны охватывать шесть сеток по бокам. Он имеет набор предопределенных классов для каждого элемента. Вы должны передавать соответствующие классы для каждого в случае необходимости. Работа с Bootstrap Разделим демо-страницу на пять основных частей: The header The marketing area The leftside bar The contents area The footer Чтобы обернуть все содержавшееся в наш веб-сайт, Вам нужно создать контейнерный класс, который должен быть с центра до середины экрана, а также имеет отступы со всех сторон. Для этого Bootstrap имеет класс “container”, который Вы будете использовать в качестве родительской оболочки. Итак, идем дальше и пишем следующий кусок кода: <div class="container"> Теперь поместим во внутрь контейнера div заголовок сайта. Для этого Вам нужно использовать тег h1. <h1><a href="#">Bootstrap Sitea>h1> Страница index.html будет размещена по центру. Время для панели навигации. Twitter Bootstrap предлагает следующую разметку для панели навигации:          <div class="navbar">               <div class="navbar-inner">                 <div class="container">                   <ul class="nav">                     <li class="active"><a href="#">Homea>li>                     <li><a href="#">Projectsa>li>                     <li><a href="#">Servicesa>li>                     <li><a href="#">Downloadsa>li>                     <li><a href="#">Abouta>li>                     <li><a href="#">Contacta>li>                   ul>                 div>               div>             div> “navbar” должен быть задан классом в основной панели навигации. Вам нужно следовать за вышеупомянутой разметкой, чтобы выглядело согласно стилю Twitter Bootstrap. Поместите код чуть ниже тега . Удостоверьтесь, что Вы помещаете все в родительском классе оболочки, т.е. “container”.  Перейдите к браузеру и проверьте страницу, увидите красивую панель навигации, чуть ниже заголовка сайта.   Конечно же, хочется, чтобы заголовок, выглядел немного иначе. В конце статьи будет рассмотрено, как Вы можете добавить свои стили, в существующие стили Bootstrap и добавить немного больше CSS для оформления заголовка. Давайте двигаться дальше, чтобы сделать вторую часть, которая называется “The marketing area”. Есть предопределенный класс, предоставленный Twitter Bootstrap для области “The marketing area”. Ему дали название класс “hero-unit”. Далее копируем приведенный ниже код и вставляем его ниже навигации div. <div class="hero-unit">     <h1>Marketing stuff!h1>     <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.p>     <a href="#" class="btn btn-large btn-success">Get Starteda>  div>   Не написав ни одной части CSS, у Вас есть такая красивая “The marketing area”. Приступим к самой интересной части - создание ссылок и кнопок. Вы можете создать любую ссылку, при этом она будет выглядеть так, как кнопка, добавив класс “btn”, и затем можно изменять ее размер, добавив несколько дополнительных классов, таких как btn-large/btn-small/btn-mini. Для изменения цвета кнопок добавим классы, такие как btn-success (зеленый), btn-info (светло-голубой), btn-warning (желтый) и btn-danger (красный). Подробнее о кнопках и украшениях ссылок можно найти в Twitter Bootstrap Base CSS section. Эти классы применяются к HTML элементу button. Теперь перейдем дальше, к панели левой стороны и содержанию. Как говорилось ранее, Twitter Bootstrap - это система из 12 сеток. Это означает, что Вы можете создать самое большое количество: это 12 сеток по вертикали, в любом родительском элементе. В настоящее время работаем в родительском классе “container”. Таким образом, разделим раздел на две неравные части, используя 12 сеток. Для левой стороны панели Вам нужно использовать класс “span4” и для правой стороны будем использовать “span8”. Имена классов показывают, что левая сторона должна охватить четыре сетки, а правая оставшиеся восемь. <div class="row">          <div class="span4">              <p>Dummy Textp>          div>          <div class="span8">              <p>Dummy Textp>          div>      div>   Вам нужно создать два отдельных столбца, стоящие рядом. По умолчанию классы span* выравниваются по левому краю. Чтобы разместить столбцы ниже всего содержимого, Вам нужно добавить “row”. Это действует, как традиционная строка таблиц. Теперь заполним левый столбец навигационным списком. Для создания навигационного списка следуйте следующей разметке. <ul class="nav nav-list">     <li class="nav-header">What we are?li>     <li class="active"><a href="#">Homea>li>     <li><a href="#">Our Clientsa>li>     <li><a href="#">Our Servicesa>li>     <li><a href="#">About Usa>li>     <li><a href="#">Contact Usa>li>     <li class="nav-header">Our Friendli>     <li><a href="#">Googlea>li>     <li><a href="#">Yahoo!a>li>     <li><a href="#">Binga>li>     <li><a href="#">Microsofta>li>     <li><a href="#">Gadgetic Worlda>li> ul> Вам нужно добавить класс “nav-list” в дополнение к классу “nav”, и это будет выглядеть как список. Добавляем класс “nav-header” к любому элементу “li”, “nav” класс будет выглядеть так, как заголовок в разделе ссылки.    Перемещаясь в “The contents area”, Вы будете просто заполнять его общими тегами и тегами . Никакие дополнительные классы не нужны, поскольку хотим, чтобы элементы выпадающего списка появлялись друг за другом, один ниже другого. Ниже приведен код, поместите его внутри “span8”. <h3>How we started?h3> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p> <h3>How do we market?h3> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p>   Как Вы можете видеть, почти закончили создание окончательного дизайна. Далее просто осталась часть “the footer portion”. Для “the footer portion”, будем снова делить “row” на три части. На этот раз раздел будет находиться в равных частях “span4”. Таким образом, Вы создадите еще одну строку div. Выполните приведенный ниже код: <div class="row"> <div class="span4">         <h4 class="muted text-center">Meet Our Clientsh4>         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p>         <a href="#" class="btn"><i class="icon-user">i> Our Clientsa>     div>     <div class="span4">         <h4 class="muted text-center">Know Our Employeesh4>         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p>         <a href="#" class="btn btn-success"><i class="icon-star icon-white">i> Our Employeesa>     div>     <div class="span4">         <h4 class="muted text-center">Reach Ush4>         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p>         <a href="#" class="btn btn-info">Contact Usa>     div> div> С помощью класса “span4” разделили строку на три равные части, а затем заполнили каждую из них с помощью тега , они выглядят как кнопки. Проверьте результат в браузере. Вы увидете маленькие изображения внутри кнопки, Our Clients и Our Employees. Вам нужно использовать тег и добавить соответствующие классы изображений, icon-user, icon-star, icon-glass и т.д. Чтобы изменить значок для белого, используйте icon-white вместе с icon-user и icon-star. Полный список значков классов можно найти в документации Bootstrap.  Чтобы добавить интервал между областью нижнего колонтитула и над содержанием, Вам нужно добавить тег между каждой “row”. Вставте тег и посмотрите на демо-страницу. Теперь для области авторского права, добавим следующий код:   <hr> <div class="footer"> <p>© 2013p> div>   Итак, наконец, создали простую, но достойную целевую страницу, используя чисто Twitter Bootstrap framework. Добавление пользовательских стилей к Twitter Bootstrap Если у Вас есть немного знаний в CSS, и Вы хотите настроить Bootstrap стили по умолчанию, то лучший способ — это создать собственную пользовательскую таблицу стилей, импортировать Bootstrap’s Style в верхней части, а затем переопределить стили в свой CSS-файл. Убедитесь, что ссылка именно на Вашу пользовательскую таблицу стилей, а не для Bootstrap CSS. Если для Вас достаточно таблиц стилей по умолчанию (Twitter Bootstrap), то Вам не нужно создавать пользовательскую таблицу стилей. Многие веб-сайты могут использовать эту структуру, и она станет общем стилем, который можно будет увидеть в каждом другом сайте, созданном с Bootstrap. Поэтому лучше добавить свою собственную таблицу CSS вверху Bootstrap CSS.   @import url("bootstrap.min.css");   Некоторые более важные компоненты из Twitter Bootstrap Выделенный параграф Чтобы выделить абзац посреди длинного документа, можете добавить класс “lead” к нему. Это сделает шрифты определенного абзаца немного больше, чем остальная часть документа. Теги акцентирования Вы можете также использовать стандартные теги  и внутри html-страницы. Теги  также будут работать. Выравнивание текста Внутри абзацев или div-тегов можно выравнивать текст с помощью классов: “text-left”, “text-center” и “text-right”. Цвет текста Можете установить цвет для текста абзаца по умолчанию, используя различные цвета текста как “muted” для серого, “text-warning” для красных, “text-error” для глубокого темно-бордового, “text-info” голубого и “text-success” для зеленого. Стиль таблицы Twitter Bootstrap имеет ту же самую конструкцию таблиц по умолчанию. Выполните следующую разметку:   <table class="table">     <tr>         <td>td>         <td>td>     tr>         ...     table>   Работа с изображениями Вы также можете добавлять изображения, используя обычный тег. Чтобы сделать Ваш дизайн более интересным, добавьте такие классы, как “img-rounded” для изображений с закругленными углами, “img-circle” для прокрутки изображений и “img-polaroid”, чтобы дать тень и радиус. Выпадающее меню Для создания выпадающего меню в уже существующую панель навигации, как показано в демо-странице, добавьте следующую разметку.   <li class="dropdown">     <a href="#" class="dropdown-toggle" data-toggle="dropdown">         <i class="icon-th-large">i> Drop Down         <b class="caret">b>     a>     <ul class="dropdown-menu">         <li><a href="#">Item1a>li>         <li><a href="#">Item2a>li>         <li><a href="#">Item3a>li>     ul> li>   Для выпадающего списка нужно обернуть родительский элемент с помощью класса “dropdown”, а затем использовать по умолчанию разметку “a”, и потом вложить еще один элемент со списком элементов. Источник: http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/