Результаты поиска по запросу: mvc 5*
Правила применения основных тегов HTML5
Автор: Антон Гончаров
Введение
Все мы уже знаем (ну или что-то слышали об) основных правила применения элементов разметки HTML5. Появилось много "плюшек" и “вкусностей” в новой спецификации HTML. Вместе с тем, появились новые элементы разметки. Но не все помнят/знают, как их использовать правильно.
Коротко остановлюсь на главных нововведениях HTML5:
Новые элементы: header, footer, section, article, video, audio, progress, nav, meter, time, aside, canvas;
Новые значения для атрибута type тега ;
Новые атрибуты HTML5 для элементов, такие как: dragable, contenteditable, hidden, contextmenu, data-*, dropzone, role, spellcheck[8] и т.д.;
Атрибуты class, dir, id, lang, style, tabindex, title, существовавшие в HTML4, теперь можно применять ко всем елементам HTML разметки;
Устаревшие элементы HTML страницы, которые частично поддерживаются и не рекомендуются к ипользованию: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt, u.
Итак, более детально рассмотрим, как же правильно использовать основные новые теги.
Элемент
Элемент <main>содержит главную информацию вашего сайта. Такие повторяющиеся элементы как логотип, окно поиска, меню навигации не рекомендуется вкладывать в <main>. Также не стоит помещать сам элемент <main> внутрь элементов <article>, <aside>, <header>, <footer> или <nav>.
Элемент
В элемент <article> следует помещать тот контент, который может быть удален без ущерба для всего сайта. К примеру, краткое описание новостей, рекламный баннер, статья, комментарии. Можно вкладывать <article> в <article>, что будет связывать вложенные элементы <article> с родительским.
Элемент
Элемент <header>, как понятно из названия, используется для оглавления отдельного контента или всей страницы. Должен содержать заглавие, дату статьи и т.д.
Элемент
Элемент <footer> служит для предоставления информации об авторе статьи/страницы, ссылки на авторские права и т.д. Обычно является прямым потоком тега <body> (помещается сразу за элемент <body>).
Элемент
Этот элемент содержит информацию об окружающем контенте, дополнительную информацию пользователю. Может содержать такой элемент, как <nav>, сноски, ссылки и т.д.
Элемент
Предназначен для предоставления контактной информации о статье или всей странице. Стоит отметить, что этот элемент часто помещают в
, для размещения ссылок для связи с авторами страницы.
Элемент
Элемент <nsfw> (англ. - Not Safe For Work – небезопасно для отработки) используется для размещения на странице контента сомнительного характера. Часто этот тег используют для размещения порнографии. Чтобы браузер не отображал такой контент, используют CSS код
nsfw {display: none ;}
Элемент
Элемент предназначен для размещения видео контента на странице. Для корректного отображения контента стоит прописать дополнительно атрибуты width, height, src, controls. Ваш код будет выглядеть примерно так:
<video width="840" height="480" src="../video/myVideo.mp4" controls> video>
Если же Вы хотите разместить у себя на странице видео, которое расположено на сайте youtube.com.
Вам стоит зайти на страницу c видео, правой кнопкой мыши нажать на видео, и из выпадающего меню выбрать “Получить код для встраивания”.
Копировать код из “попап” окошка.
В разметке вашего сайта, в нужном вам месте, кликнуть правой кнопкой мыши и выбрать “Вставить”.
У вас получится примерно такой код:
<iframe width="854" height="510" src="https://www.youtube.com/embed/_giinWWrNlQ" frameborder="0" allowfullscreen>iframe>
В свою очередь, элемент > создает область, которая позволяет загружать любой документ в себя.
Элемент
Элемент <audio> позволяет добавить на страницу аудио дорожки.
Также в HTML5:
Реализована возможность добавления на станицу геолокационных карт, а также определения местоположения пользователя в данный момент.
Теперь мы можем рисовать с помощью технологии canvas. А также использовать 3D графику.
Стало возможным просто перетягивать документы и прикреплять к письму.
И еще много новых "плюшек", которые вы можете узнать и научиться их использовать, пройдя наши курсы в учебном центре CyberBionic Systematics.
Всем удачи и хорошего кода)
Асинхронное программирование в JavaScript. Использование Deferred и Promise.
Автор: Дмитрий Охрименко
Введение
В современном JavaScript приложении встречается много задач, которые выполняются асинхронно (обращение к серверу, анимация, работа с файловой системой, геолокация). В данной статье будут рассмотрены Promise объекты, как один из вариантов организации асинхронного кода.
Асинхронное программирование в JavaScript
Асинхронное программирование в JavaScript не связано с многопоточностью. JavaScript – однопоточный, это означает, что не существует стандартных языковых конструкций, которые позволят создать в приложении дополнительный поток для выполнения параллельных вычислений (единственная возможность организовать настоящую многопоточность – использовать Web Workers). Асинхронное программирование – стиль программирования, при котором результат работы функций доступен не сразу, а через некоторое время. Асинхронная функция – это функция, после вызова которой JavaScript приложение продолжает работать, потому что функция сразу выполняет возврат. Результат работы асинхронной функции становится известным позже, и для того, чтобы оповестить наше приложении о полученных значениях, асинхронная функция вызывает другую функцию (callback), которую мы передаем в аргументах при запуске.
Например, getDataFromServer(onSuccess); getDataFromServer – асинхронная функция, выполняющая запрос на сервер, onSuccess – callback функция или функция обратного вызова, которая запускается при успешном завершении операции обращения к серверу.
Использование callback функций может привести к появлению проблемы, которую называют Pyramid of Doom – callback функция, в которой вызывается асинхронная функция, которой передается callback функция, и в ней же вызывается асинхронная функция и т.д.
step1(function(result1) {
step2(function(result2) {
step3(function(result3) {
// и т.д.
});
});
});
Такой код тяжело читать и сопровождать. Для того, чтобы подобных проблем не было , мы можем использовать различные шаблоны для организации кода. Один из таких шаблонов - Promise. (Другие варианты организации асинхронного кода можно посмотреть в этой статье)
Что такое Promise (ECMAScript 6)
Promise – прокси объект, который представляет еще не известное значение (значение будет доступно после завершения асинхронной операции). С Promise можно ассоциировать две функции: первая - для выполнения операции, если асинхронная задача завершилась успешно. И вторая - для операции в случае ошибки.
Promise может находиться в одном из трех состояний:
pending;
fulfilled;
rejected.
Например, мы выполняем AJAX запрос с помощью асинхронной функции, которая возвращает Promise. Как только мы выполним запрос, функция создаст Promise, который будет в состоянии pending. Когда сервер вернет ответ, Promise перейдет в состояние fulfilled, если ответ был 200 OK, или в состояние rejected, если статус код был 500 Internal Server Error (или другой код ошибки). При переходе в fullfiled состояние Promise будет содержать ответ от сервера, при переходе в rejected – ошибку или текст ошибки (все зависит от реализации асинхронной функции).
Как только Promise меняет свое состояние, запускается функция, которая была зарегистрирована как реакция на соответствующее состояние.
Пример использования асинхронной функции download, которая возвращает Promise:
download("data.txt").then(function (data) {
console.log(data);
}, function (error) {
console.error(error);
});
или такая запись
var p = download("data.txt");
p.then(onFulfilled, onRejected);
function onFulfilled(data) {
console.log(data);
}
function onRejected(error) {
console.error(error);
}
Для того, чтобы установить, что произойдет после завершения асинхронной операции, на объекте Promise необходимо вызвать метод then. Этот метод принимает два аргумента:
обработчик для состояния fulfilled
обработчик для состояния rejected
Функцию then можно вызвать в любой момент, даже если асинхронная операция уже завершена и Promise перешел из состояния pending. Если вызвать then на Promise, который уже находится в конкретном состоянии, то будет вызвана соответствующая состоянию функция, переданная в метод then.
Ниже приведен код асинхронной функции download.
function download(url) {
// Создание нового объекта Promise
return new Promise(function (resolve, reject) {
var req = new XMLHttpRequest();
req.open('GET', url);
req.onload = function () {
if (req.status == 200) {
// перевод Promise в состояние fulfilled.
// req.response - данные доступные в функции-обработчике
// перехода состояния
resolve(req.response);
}
else {
// перевод Promise в состояние rejected
reject(Error(req.statusText));
}
};
// Обработка сетевых ошибок
req.onerror = function () {
// перевод Promise в состояние rejected
reject(Error("Network Error"));
};
// отправка запроса на сервер
req.send();
});
}
Поддержка Promise браузерами http://caniuse.com/#search=Promise
Библиотеки для работы с Promise
Есть много различных библиотек, которые реализуют спецификацию объекта Promise. Поэтому проблему слабой поддержки Promise ECMAScript 6 можно решить, применив одну из следующих библиотек:
jQuery http://jquery.com/
Q https://github.com/kriskowal/q
When https://github.com/cujojs/when
WinJs http://msdn.microsoft.com/en-us/library/windows/apps/br211867.aspx
RSVP.js https://github.com/tildeio/rsvp.js
Вещи, которые отпугивают пользователей от Вашего сайта
Автор: Редакция ITVDN
Введение
Используя интернет для поиска информации или для покупок различных товаров, Вы часто можете найти на сайте детали, портящие представление о ресурсе.
Такие вещи, как долгая загрузка страницы или куча рекламных объявлений, могут оставить плохие впечатления о сайте. В данной статье представлены пять неприятных вещей, подталкивающих пользователя покинуть Ваш сайт.
1. Большой объем текста на сайте
В среднем пользователи читают около 28% слов на странице. Научитесь вставлять текст только там, где это необходимо. Также попробуйте другие способы передачи информации на странице, например, используйте картинки или видео. Данные альтернативные решения помогут привлечь пользователей на сайт и повысить конверсию.
2. Очень долгая загрузка сайта
Наверняка Вы знаете о том, что пользователи хотят получать информацию мгновенно, поэтому, когда они нажимают на ссылку, они хотят, чтобы сайт загрузился мгновенно. 40% пользователей покинут сайт если загрузка займет более 3 секунд. Есть простой способ исправления проблемы - смена хостинг провайдера или оптимизация кода Вашего сайта.
3. Сайт не работает на планшете/мобильном устройстве
Люди получают контент с самых различных типов девайсов, имеющих подключение к интернету. Но на самом деле 60% пользователей используют для просмотра контента мобильные устройства. К чему эти цифры? К тому что Ваш сайт должен правильно отображаться на всех типах экранов, начиная от 4’7 дюймового телефона, заканчивая дисплеем Mac.
4. Видео на сайте запускается без ведома пользователя
Автозапуск – функция автоматического воспроизведения видео контента, когда пользователь попадает на сайт, или когда он прокручивает страницу до определенной точки. Это типичная тактика для привлечения внимания пользователя. К сожалению, такой вид маркетингового хода может негативно сказаться на количестве Ваших посетителей.
5. Невозможно связаться со службой поддержки
Веб сайт должен обязательно иметь двухсторонний метод связи между пользователем и администрацией. Сейчас можно найти очень много сайтов без контактных данных администрации. Решением проблемы является указание контактных данных или же установка виджета, позволяющего легко отправить вопрос службе поддержки.
Источник: mashable.com
Основы ADO.NET
Автор: Редакция ITVDN
Введение
ADO.NET – это набор классов (фреймворк) для работы с базами данных, а также XML файлами. Аббревиатура ADO расшифровывается как ActiveX Data Objects. Данная технология имеет методы и классы для извлечения и обработки данных.
Список .NET приложений, которые используют возможности ADO.NET для различных действий с БД:
ASP.NET Web Applications
Console Applications
Windows Applications.
Структуры подсоединения к БД
Можно определить два типа архитектуры подключения:
Архитектура, подключенная к базе: подсоединена к БД на протяжении всего рабочего времени.
Архитектура, не подсоединённая к БД: приложение, автоматически подключается/отключается в процессе работы. Приложения на такой архитектуре используют временные данные, хранящиеся на стороне клиента (DataSet).
ADO.NET и его библиотеки классов
На данной диаграмме видны различные типы приложений (Веб приложения, консольные приложения, приложения для Windows и так далее), использующие ADO.NET для подсоединения к БД (SQL Server, Oracle, OleDb, ODBC, XML-файлы и так далее).
Классы в ADO.NET
Также на предыдущем рисунке мы видим различные классы, а именно:
Connection Class
Command Class
DataReader Class
DataAdaptor Class
DataSet.Class
1. Connection Class
Данные классы применяются в ADO.NET для подсоединения к БД.
2. Command Class
Данный класс обеспечивает хранение и выполнение SQL команд. Ниже приведены различные команды, выполняющиеся с помощью данного класса.
ExecuteReader: Возвращает данные к клиенту в виде строк.
ExecuteNonQuery: Выполняет команду, изменяющую данные в базе данных.
ExecuteScalar: Данный класс возвращает только одно значение.
ExecuteXMLReader: (Только для классов SqlClient) Получает данные из базы данных SQL Server 2000 с помощью XML-потока.
3. DataReader Class
DataReader используется для получения данных. Он используется в сочетании с Command Class для выполнения SQL-запроса.
5. DataSet Class
Класс DataSet – сердце ADO.NET, представляющее из себя набор объектов DataTable. Каждый такой объект содержит много объектов DataColumn и DataRow.
Подключение ADO.NET к базе данных
Для настройки подключения Вы должны быть знакомы со строками подключения (connection strings). ConnectionString – строка переменной (регистр не учитывается). Строки подключения нужны нам для параметра SQLConnection. Данные примеры содержат основные значения, а именно: provider, server, database, userid и password.
SQL Аутентификация
String constr="server=.;database=institute;user id=rakesh;password=abc@123";
Или:
String constr="data source=.;initial catalog=institute;uid=rakesh;pwd=abc@213";
Windows Аутентификация (Windows Authentication)
String constr="server=.;database=institute;trusted_connection=true"
Или:
String constr="server=.;initial catalog=institute;integrated security=true"
Получение и отображение данных из базы данных
Получить и отобразить данные можно по такой схеме:
Создайте объект SqlConnection, используя строку подключения.
Откройте соединение.
Создайте SQLCommand. Укажите тип SQLCommand.
Выполните команду (используйте executereader).
Получить результат (используйте SqlDataReader).
Закройте соединение.
Получите результат.
Ниже приведен код для подсоединения к SQL:
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data.OracleClient;
using System.Data.OleDb;
using System.Data.Odbc;
namespace AdoDemo
{
public partial class WebForml : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection("data source=.; database=Sample; integrated security=SSPI");
SqlCommand cmd = new SqlCommand("Select * from tblProduct", con);
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
GridView1.DataSource = rdr;
GridView1.DataBind();
con.Close();
}
}
}
Вы должны использовать System.Data.SqlClient для подключения к SQL. В предыдущем коде мы использовали классы SqlConnection, SqlCommand и SqlDataReader, потому что наше приложение обращалось к SQL Server, а он понимает только SQL.
Подключение к базе данных Oracle
При подключении к БД Oracle Вам нужно изменить имя некоторых классов, а именно SqlConnection на OracleConnection, SqlCommand на OracleCommand и SqlDataReader на OracleDataReader. Также вначале используйте System.Data.OracleClient.
Источник: http://www.c-sharpcorner.com/UploadFile/18fc30/understanding-the-basics-of-ado-net/
Инициализация авто свойств в C# 6.0 в 2015 году
Автор: Редакция ITVDN
Введение
Мы уже писали статью про нововведение в C# 6.0, а сейчас мы хотим более детально рассмотреть одну из функций – инициализацию авто свойств.
После выхода C# 5.0 разработчики просили добавить функцию инициализации объявленных свойств. Раньше при создании файла Вам нужно было инициализировать элементы списком, иногда этот список смотрелся очень громоздко.
Теперь с появлением C# 6.0 можно убрать некоторые строчки кода, тем самым снизить вероятность ошибок при компилировании и увеличить производительность.
Давайте рассмотрим пример старой модели авто свойства:
public string FirstName { get; set; }
Сейчас данная модель немного изменилась, теперь можно присвоить значение по умолчанию для авто свойств в C# 6.0, не используя дополнительную строку. Достаточно просто поместить знак равенства в конце строки и задать значение, которое будет использоватся по умолчанию.
Пример установки значения по умолчанию при объявлении авто свойства:
public class Employee
{
public string FirstName { get; set; } = "itvdn";
public string LastName { get; set; } = "example";
public DateTime JoiningDate { get; set; } = DateTime.Now;
public string Blog { get; set; } = "www.itvdn.com";
}
Теперь при создании нового класса для свойств автоматически устанавливаются значения по умолчанию.
Небольшой пример:
var employee = new Employee();
Console.WriteLine("\n Пользователь: " + Employee.FirstName + " " + Employee.LastName +
"\n Дата регистрации: " + Employee.JoiningDate +
"\n Домашняя страница: " + Employee.Blog);
Console.ReadLine();
Когда Вы скомпилируете приведенный выше код, Вы увидите, что значения по умолчанию выводятся на экран как повторно неинициализированные свойства.
C# 6.0 еще разрабатывается, но уже сейчас с ним можно поработать, скачав Visual Studio 2015. Это, конечно, не полный список нововведений, но по ним видно, что C# - один из самых перспективных языков программирования. Про другие функции мы расскажем Вам в нашей следующей статье.
Источник: http://www.kunal-chowdhury.com/2014/11/csharp-6-auto-property.html
Новые возможности CSS3
Автор: Редакция ITVDN
Введение
CSS3 произвел революцию в мире веб разработки, поскольку он принес много новых функциональных возможностей. Эта технология продолжает развиваться и внедрять новые возможности. В Новом, 2015 году будут добавляться новые свойства, про некоторые из них мы расскажем в этой статье.
CSS - маски
В Webkit браузерах CSS-маски функционируют уже давно. В ноябре 2014 года была опубликована новая спецификация CSS масок, теперь мы ждем, когда поддержку данного свойства получат все браузеры.
Что такое маска? Проще говоря, маской можно назвать изображение с белой или черной фигурой и прозрачным фоном. Применяя маску на изображение или элемент, мы получим маскированное изображение.
Пример:
Маски можно использовать сейчас, но, к сожалению, только в браузерах Webkit отображение будет корректным.
Использование масок в Webkit
На движке Webkit маски выполняются очень легко, просто используйте тег mask.
.element {
-webkit-mask: url('mask.png');
}
Давайте попробуем создать пример. Вот наше изображение маски:
Накладывать маску будем на эту фотографию:
Теперь добавим немного кода:
class="element">
src="image.jpeg" alt="" />
type="text/css">
.element {
width: 500px;
overflow: hidden;
}
.element img {
-webkit-mask: url(mask-image.png);
}
В результате мы получим вот такое изображение:
Кроме того, можно использовать свойства. Например, Вы можете установить позицию:
.element img {
-webkit-mask: url(mask-image.png) 30% 30% repeat-x border-box;
/* .. тоже самое что и.. */
-webkit-mask-image: url(mask-image.png);
-webkit-mask-position: 30% 30%;
-webkit-mask-repeat: repeat-x;
-webkit-mask-box-clip: border-box;
/* Так же можно указать и размер! */
-webkit-mask-size: 30% 30%;
}
CSS-исключения
CSS-исключения (CSS Exclusions) - очень мощная функция, позволяющая изменить отображение контента на странице. Используя только одно свойство, можно поменять весь стиль страницы, это очень похоже на редактирование страницы в редакторе WYSIWYG. Давайте посмотрим на самое интересное свойство - “wrap-flow”.
Wrap-flow
Wrap-flow позволяет определить, какое количество элементов влияет на другие, когда они поверх остальных. Зачастую блоки перекрываются. С помощью wrap-flow все элементы адаптируются под верхний элемент на странице.
Wrap-flow имеет несколько настроек:
auto: обычное состояние, ни один из элементов не регулируется
start: все, что после элемента - удаляется
end: удаляется все, что до элемента
both: удаляется контент под объектом
minimum: удаляется сторона с наибольшим количеством контента
maximum: удаляется сторона с наименьшим количеством контента
clear: c двух сторон от объекта всё содержимое удаляется
Диаграмма для помощи:
Композиции и модели смешивания (Composition and Blending)
Режимы смешивания в CSS стали частью официальной спецификации W3C. Это значит, что Вы можете выполнять затемнения основы (color burn) через CSS. Данная спецификация новая, так что возможны изменения прежде, чем она попадет в другие браузеры. У нее такой принцип работы: есть 2 изображения, они накладываются одно на другое с помощью абсолютного позиционирования.
Это будет выглядеть так:
<div class="blend">
<img src="duck.gif" alt="Duck" class="duck" width="500" height="500" style="position: absolute; top: 0; left: 0" />
<img src="penguin.gif" alt="Penguin" class="penguin" width="500" height="500" style="position: absolute; top: 0; left: 0" />
div>
Пример CSS кода:
.blend {
position: relative;
}
.blend .duck {
mix-blend-mode: overlay;
}
В целом вся конструкция выглядит так:
Если Вам интересно, то можете попробовать режимы наложения прямо сейчас. Для этого Вам необходимо скачать Adobe’s experimental webkit browser
Источник: http://www.inserthtml.com/2013/01/future-css3/
Валидация форм средствами HTML5
Автор: Редакция ITVDN
Введение
Используя формы в HTML5, Вы часто используете методы проверки (валидации) данных, ведь их игнорирование может привести: к потерям пользователей,к мусору в базе данных или к взлому сайта. Исторически сложилось, что создание форм с хорошей валидацией – сложная задача.
В HTML5 есть инструменты обработки данных для форм, с их помощью можно производить валидацию, включающую в себя специальные атрибуты и новые типы входных данных. Давайте разберем их детальнее.
1. Специализированные типы входных данных
В HTML5 введены несколько новых типов ввода. Они используются для создания поля ввода, принимающего только определенные типы данных.
Новые типы входных данных выглядят следующим образом:
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
Пример:
<input type="email"/>
Если браузер не поддерживает данный тип ввода, поле будет вести себя, как обычное поле ввода текста.
2. Обязательные поля для заполнения
Просто добавив атрибут "required" к <input>, <select> или <textarea>. , Вы говорите браузеру, что значение должно быть заполнено.
<input type="checkbox" name="terms" required >
3. Лимиты
Мы можем установить некоторые ограничения и лимиты, например, максимальные и минимальные значения для числовых полей. Чтобы ограничить длину поля ввода надо использовать атрибут "maxlength".
<input type="text" name="name" required maxlength="15">
Поле <input type="number" /> использует атрибуты "max"и "min", чтобы создать диапазон возможно-допустимых значений (в примере минимально допустимый возраст 18)
<input type="number" name="age" min="18" required>
4. Стилизирование
CSS3 псевдо-классы позволяют украсить форму в не зависимости от ее состояния. Это:
:valid
:invalid
:required
:optional
:in-range
:out-of-range
:read-only
:read-write
В примере мы объединили селекторы "valid" и "invalid" с псевдо-классом "focus" для закрашивания поля формы в красный или зеленый, в зависимости от того, что делает пользователь: выбирает или печатает.
input:focus:invalid,
textarea:focus:invalid{
border:solid 2px #F5192F;
}
input:focus:valid,
textarea:focus:valid{
border:solid 2px #18E109;
background-color:#fff;
}
5. Подсказки
Вы замечали всплывающее окно с подсказкой при отправлении неправильно заполненной формы? Установив атрибут "title" для поля ввода, можно добавить подсказки, указывающие на ошибки при нарушении тех или иных правил валидации.
Обратите внимание, что разные браузеры отображают всплывающие подсказки по-разному. В браузере Chrome значение названия атрибута будет отображаться мелким шрифтом, под основным сообщением об ошибке. В Firefox другая проблема: использовав атрибут “pattern” после того как он берется в качестве шаблона, Вы не получите всплывающую подсказку.
<input type="text" name="name" title="Пожалуйста введите имя пользователя.">
6. Шаблоны
Атрибут "pattern", разрешает разработчикам задавать регулярное выражение, которое браузер сравнивает с данными ввода, прежде чем отправить форму заявки.
Вот как это можно использовать:
<input type="email" name="email" required pattern="^\S+@\S+\.\S+$" title="example@mail.com">
С функцией фильтрования входных данных мы можем принимать только полный e-mail адрес.
Источник: http://tutorialzine.com/2014/12/quick-tip-easy-form-validation-with-html5/
6 основных тенденций, которые будут популярны в веб-разработке в 2015 году
Автор: Редакция ITVDN
Введение
Подошел к концу 2014 год и самое время спросить себя: «Какие тенденции будут преобладать в сфере веб-разработки в 2015 году?». Представляем вашему вниманию подборку трендов, которые, по нашему мнению, будут популярны в следующем году.
1. Адаптивный дизайн
Вместе с ростом популярности на планшеты начал расти спрос на адаптивный дизайн, сегодня это - неотъемлемая часть любого сайта. С помощью “Responsive Design” пользователь сможет спокойно просматривать Ваш сайт на любом девайсе, будь то PC или мобильный телефон. Зачем Вам адаптивный дизайн? Ответ простой, сейчас все больше пользователей просматривают новости через разные устройства с разным расширением экрана, поэтому выбор ресурса напрямую зависит от удобства его использования на всех носителях. Главный критерий выбора – ширина контента не должна превышать ширину экрана, иначе пользователю будет неудобно воспринимать информацию и он к вам больше не вернется.
2. Плоский дизайн (Flat Design)
Плоский дизайн начал набирать свою популярность после релиза Windows 8, благодаря компании Microsoft и ее Metro-стилю. Концепция плоского дизайна заключается в том, что двухмерные изображения не перегружают восприятие пользователя и уменьшают загруженность ресурса. В плоском дизайне отсутствуют лишние эффекты: тени, блики и градиенты, в противовес им выдвигаются яркие цветовые решения.
3. Карточный дизайн
Карточный дизайн — это способ подачи контента на страницах сайта. Каждая карточка содержит в себе определенную информацию, это дает ресурсу возможность концентрировать внимание пользователя и легко группировать содержимое сайта. Главное преимущество данного типа дизайна — это легкость взаимодействия пользователя с Вашим сайтом, ведь карточки легко можно опубликовать на своей странице в социальных сетях, сохранить в избранное или прокомментировать. Первопроходцами карточного дизайна считаются Pinterest и Google+. Благодаря своей отзывчивости и адаптивности все больше сайтов переходит на карточный дизайн.
4. Фоновые изображения и видео
За последнее время все большую популярность набирают ресурсы с широкоформатным изображением или видео на фоне, с небольшой цитатой поверх него. Этот прием идеально подходит для сайта-портфолио или сайта-визитки.
5. Рисованные иллюстрации и шрифты
Сайты с рисованной типографикой или иллюстрациями подкупают своей неповторимостью. Все больше сайтов начали использовать в своем дизайне элементы, разработанные вручную, именно под определенный проект. Эти детали делают сайт уникальным и запоминающимся, пользователю приятней пользоваться таким сайтом, он захочет рассказать о нем другу и обязательно вернется сам.
6. SVG иконки и анимации
SVG — это специальный язык разметки векторной графики, который разрабатывается W3C с 1999 года. Возможность создавать SVG изображения доступна в большинстве векторных редакторов: Illustrator, Corel Draw или Sketch. SVG-графика часто используется для создания иконок, они выглядят качественней и легко адаптируются под разные расширения экрана. И напоследок, с помощью SVG можно создавать анимированные иконки.
Источник: http://www.sevensignature.com/blog/articles/top-10-sign-things-come-2015-web-design-trends/
Приоритет операторов в JavaScript (часть 2)
Автор: Александр Марченко
Продолжение описания.
Статья является продолжением статьи "Приоритет операторов в JavaScript", здесь будет проанализирована работа операторов дикремента и инкремента, а также рассказаны особенности применения сокращенной формы арифметических операторов.
В случае, если в любом математическом выражении используется сразу несколько разных операторов, то порядок их выполнения будет определяется приоритетом. Всем известно, что операция умножения будет выполнятся в выражении раньше, нежели операция сложения. Но, поскольку в JavaScript существует гораздо больше операторов, крайне полезно ознакомиться с таблицей приоритетов. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence.
Рассмотрим простой пример:
<script type="text/javascript">
var a = 3 + 4 * 5;
alert(a);
</script>
Оператор умножения * имеет приоритет несколько выше, чем оператор сложения +, при этом не важно, что стоит после него. Поэтому операция умножения будет выполнена первой, ее операндами будут значения 4 и 5, результат умножения станет вторым операндом в операции сложения. Оператор присваивания = имеет наименьший приоритет, следовательно, операция присваивания будет выполнена после операции сложения. В итоге получим значение a = 23.
Приоритет операторов можно переопределить, используя скобки. Таким образом, получим следующее выражение:
var b = (3 + 4) * 5;
alert(b);
Теперь результат сложения будет первым операндом в операции умножения, и получим результат b = 35.
На практике, если вы точно не уверены в приоритетах используемых операторов, используя скобки, вы разбиваете сложное выражение на совокупность более простых, которые выполняются по отдельности.
Инкремент и декремент.
Довольно часто возникает потребность провести увеличение или уменьшение значения переменной, изменить элемент массива, увеличив его или уменьшив на единицу, для этого используются специальные операторы:
Инкремент ++, выполняет изменение значения переменной, увеличивая на единицу. Может принимать две формы: постфиксный и префиксный.
Декремент --, выполняет изменяет значение переменной, уменьшая на единицу, и также принимает две вышеупомянутые формы.
Ознакомимся с отличиями постфиксного и префиксного изменения переменной на примере инкремента.
<script type="text/javascript">
var myVariable1 = 1;
var myVariable2
myVariable1++; // myVariable1 = myVariable1 + 1;
document.write("Значение переменной myVariable1 = " " + myVariable1 + "");
++ myVariable1; // myVariable1 = myVariable1 + 1;
document.write("Значение переменной myVariable1 = " " + myVariable1 + "");
// В случае когда в инструкции используется исключительно оператор инкремента, нет разницы какую форму мы используем.
myVariable2 = myVariable1++; // myVariable2 = myVariable1
document.write("Значение переменной myVariable2 = " " + myVariable2 + "");
document.write("Значение переменной myVariable1 = " " + myVariable1 + "");
// В данном случае значение переменной myVariable1 увеличивается на 1, но в переменную myVariable2 передается старое значение. Иначе говоря, сперва происходит операция присвоения myVariable2 = myVariable1, а затем увеличения myVariable1 = myVariable1 + 1
myVariable2 = ++ myVariable1; // y = myVariable1 + 1
document.write("Значение переменной myvariable2 = " " + myVariable2 + "");
document.write("Значение переменной myVariable1 = " " + myVariable1 + "");
// В этом случае, вызов ++ myVariable1 сперва увеличит переменную, и затем вернет ее значение (увеличенное значение) в переменную myVariable2.
</script>
Как видим, особенностью инкремента является наличие у него постфиксной формы, которая срабатывает лишь после завершения той инструкции, в которой она использовалась, т.е. после первой встречающейся точки с запятой «;», которая сигнализирует о завершении инструкции JavaScript.
Что касается декремента, принцип его работы идентичен инкременту, с отличием лишь в том, что происходит операция вычитания единицы от единственного операнда. Если он стоит перед операндом, он уменьшает его на единицу и возвращает уменьшенное значение, в случае размещения после операнда – уменьшает операнд, и возвращает прежнее неизмененное значение.
Сокращенная форма.
Кроме операторов увеличения и уменьшения на единицу (инкремента и декремента), для упрощения записи простых арифметических операций (по типу x = x + 3;) существуют следующие специальные операторы: +=, -=, *=, /=, которые работают по следующему принципу:
<script type="text/javascript">
var myVariable1 = 9;
myVariable1 += 3; // myVariable1 = myVariable1 + 3;
document.write("myVariable1 += 3 = "" + myVariable1 + "");
myVariable1 -= 3; // myVariable1 = myVariable1 - 3;
document.write("myVariable1 -= 3 = "" + myVariable1 + "");
myVariable1 *= 3; // myVariable1 = myVariable1 * 3;
document.write("myVariable1 *= 3 = "" + myVariable1 + "");
myVariable1 /= 3; // myVariable1 = myVariable1 / 3;
document.write("myVariable1 /= 3 = "" + myVariable1 + "");
</script>
Применяя сокращенные операторы, важно помнить об их приоритете выполнения. В таблице приоритетов вы найдете приоритет сокращенных операторов ( +=, -=, *=, /=, %=, <<=, >>=, >>>=, &=, ^=, |= ) одним из самых низких. После них находится только оператор множественного вычисления « , ». Это означает, что действия, заложенные в эти операторы, будут выполняться после всех прочих из вашего выражения наравне с оператором присвоения.
Использование коротких форм применения операторов позволяет существенно ускорить написание вашего сценария и при должном внимании упростить процесс его создания. Зачастую подобное использование операторов применяют в написании тела условных и циклических конструкций.
Приоритет операторов в JavaScript (часть 1)
Автор: Александр Марченко
Введение
В данной статье мы познакомимся со стандартными операторами и их применением в языке программирования JavaScript для работы с переменными и со значениями.
Сперва познакомимся со специфической терминологией, которая используется при работе с операторами.Большинство операторов обозначаются символами пунктуации, такими как =, +, - и другими. Некоторые – специальными ключевыми словами, к примеру, delete и new. Но, как знаки пунктуации, так и ключевые слова обозначают обычные операторы, просто используют для этого разный синтаксис.
Оператор присвоения
Операнд – то, к чему будет применен оператор, или порой можно встретить название: «аргумент оператора».
Оператор присваивания выглядит как знак равенства = :
var a = 1, b = 2;
В данной строке переменной "a" было присвоено значение 1, а переменной b – значение 2.
var a = a + 2;
В этой строке переменной "a" было присвоено ее значение, увеличенной на 2. Иначе говоря, сперва выполнится операция сложения текущего значения переменной a, результат которого будет пере-присвоен переменной a.
Полезной особенностью данного оператора является использование его по цепочке:
var a, b, c;
a = b = c = 2 + 3;
В результате работы последней строки всем трем переменным будет присвоено значение 5.
Арифметические операторы
Арифметические операторы используются для определения простейших математических операций над операндами, в качестве которых могут выступать как значения, так и переменные: плюс + , минус - , умножить * , поделить / , деление по модулю (определение остатка от деления) %.
Большинство JavaScript-операторов работают с двумя операндами, следовательно, способны два простых выражения объединить в одно более сложное. Но JavaScript поддерживает несколько унарных операторов, которые преобразуют только одно выражение в другое, более сложное.
Таким оператором является унарный минус, который изменяет знак числа на противоположный. В таком случае оператор «минус» в выражении -1 представляет собой унарный оператор и выполняет смену знака у своего единственного операнда 1.
<script type="text/javascript">
var x = 1;
document.write(-x + " ");
document.write(-(-x) + " ");
document.write(-(x + 4) + " ");
script>
Унарный плюс, используемый в качестве арифметического оператора, не выполняет каких-либо действий:
<script type="text/javascript">
document.write(+1);
document.write(" ");
document.write(+(1 - 2));
script>
Более распространенным применением унарного плюса является преобразование значения в число.
В случае объединения двух выражений в одно более сложное используются бинарные операторы, иначе говоря, бинарным называют оператор, который применяется к двум операндам, к примеру, если оператор плюс будет стоять между двумя числами, он будет представлен в своей бинарной форме:
<script type="text/javascript">
var a = 1, b = 2;
document.write(a + b + " ");
document.write(b + a + " ");
script>
Кроме того, если у нас есть две переменные со строковыми значениями, бинарный плюс сложит эти строки. произведя конкатенацию, а применение унарного плюса к каждой из переменных произведет преобразование их значений к числу.
var a = "2";
var b = "3";
alert(a + b); // "23", произошла конкатенация строк
alert(+a + b); // "23", второй операнд - всё ещё стоковая переменная
alert(+a + +b); // 5, число, поскольку оба операнда предварительно преобразованы в числа ((+a) + (+a))
В то же время, если использовать оператор «минус», мы получим другие результаты:
var a = "2";
var b = "3";
alert(a - b); // -1, произошло неявное преобразование типов
Таким образом, мы подошли к тому, что создавая JavaScript-выражения, важно обращать внимание на типы данных, передаваемых операторам, и, как следствие, на типы данных, которые они возвращают. Стоит отметить, что различные операторы требуют, чтобы операнды, с которыми они работают, возвращали значения только определенного типа. Так, нельзя выполнить умножение строк, поэтому выражение var a = "text1" * "text2"; не является допустимым и приведет к ошибке. В то же время, выражение var a = "2" * "3"; вполне допустимо, потому что интерпретатор JavaScript будет пытаться по мере возможностей преобразовать выражение в требуемый тип данных, в нашем случае из строкового типа в числовой.
Познакомимся с работой операторов умножения и деления на простом примере. В данном случае мы используем бинарные формы операторов, поскольку они взаимодействуют с двумя операндами:
<script type="text/javascript">
document.write("2" / 2 + " "); // 1, произойдет неявное преобразование строки в число
document.write(((2 + 2) * 6) / "12" + " "); // 2, произойдет неявное преобразование строки в число
document.write(12 * 7 / 2 + " "); // 42
document.write(17 % 7 + " "); // 3, возвращаем остаток от целочисленного деления
document.write(21 / 3 - 1 + " "); // 6, наблюдаем правильный порядок выполнения операций: сперва деление, затем нахождение разницы
script>
Если с работой операторов +, -, *, / в самом простом их применении мы были знакомы еще из младшей школы, то с оператором % стоит познакомиться детальней. Оператор деления по модулю % вычисляет остаток, получаемый при целочисленном делении первого операнда на второй, которые в курсе школьной математики именовались как делимое и делитель соответственно, а в результате самого деления мы получали частное и остаток от деления. Деление по модулю подразумевает возвращение остатка от деления.
Например, выражение var a = 190 % 27; будет выполнено следующим образом:
Оператор деления по модулю зачастую применяют к целочисленным операндам, но он корректно работает и с вещественными значениями. Так, в итоге выполнения выражения var a = -6.3 % 3; переменной a будет присвоено значение -0.3.
Кроме этого, стоит отметить следующие особенности вычислений в JavaScript:
<script type="text/javascript">
var a = 4,
b = true;
c = undefined,
d = Infinity,
e = 0,
res = undefined;
res = a * d;
document.write(res + " "); // Infinity, умножение числа на бесконечность возвращает бесконечность
res = a + b;
document.write(res + " "); // 5, true преобразовывается в 1 и производится операция сложения
res = a / e;
document.write(res + " "); // Infinity, деление числа на ноль возвращает бесконечность
res = a * c;
document.write(res + " "); // NaN, умножение числа на неопределенный тип данных, вернет сигнализацию об ошибке в виде NaN - Not a Number
script>
В дальнейшем мы познакомимся с такими операторами как инкремент/декремент, операторами сравнения, равенства и идентичности, которые будут часто использоваться в написании клиентских сценариев c использованием языка JavaScript.