Результати пошуку за запитом: mvc4 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.