Результати пошуку за запитом: mvc4 5*
Хто такий Type Script?
Автор: Віталій Толмачев
Введение
Сегодня уже никого не удивишь выходом очередной новой технологии. Уж у нее точно будет та самая кнопка «Сделать все красиво за меня» и уж точно она будет работать как следует. Пользователи уже сравнительно спокойно относятся к выходу новых фреймворков и их освоению. Более того, даже с некоторой осторожностью. Где гарантия, что новенький всеумеющий фреймворк в обычный вторник через год не перестанут поддерживать, так как он не нашел своей широкой реализации и нужного комьюнити?
Если объективно оценивать ситуацию, то Java Script победил. На сегодняшний день это самый кроссплатформенный язык. Его можно спокойно разместить как внутри страницы
<script type="application/javascript">
alert('Hello, World!');
script>
Так и внутри тега
<a href="delete.php" onclick="return confirm('Вы уверены?');">
Удалить
a>Более
Более того, можно вынести в отдельный файл
<head>
<script type="application/javascript" src="http://Путь_к_файлу_со_скриптом">
script>
head>
Он отлично себя чувствует как на стороне клиента (браузер), так и на стороне сервера. И все равно, какую платформу использует клиент. Что уже говорить о браузерных операционных системах. В IndraDesktop WebOS программный код на 75 % состоит из JavaScript, IntOS — на 70 %, eyeOS — 5 %, но в eyeOS JavaScript участвует в визуализации на клиенте, что очень важно для отлаженной работы между клиентом и сервером.
Все Вы слышали о языке Java Script, а кто-то из Ваших друзей может внятно объяснить, что за ЯП такой Type Script? Кто создатель языка, какие особенности языка? Все очень просто. Человек, имея опыт создания Turbo Pascal, Delphi и даже С#, решил создать что-то еще лучше. Имя ему Андерс Хейлсберг. TypeScript представлен миру в 2012 году компанией Microsoft и был призван расширить возможности JavaScript. Код компилятора TypeScript распространяется лицензией Apache и на данный момент разработка данного языка ведётся в открытом репозитории GitHub.
Имея опыт разработки в строго типизированных языках, многим программистам поведение под кодом JS не всегда является очевидным. А что, если дать языку JS поддержку полноценных классов, статическую типизацию, поддержку подключения модулей? Станет ли код очевидным, облегчит ли это рефакторинг, поиск ошибок еще на этапе разработки? Наверно, с такими мыслями проснулся однажды Хейлсберг. Все это ему удалось реализовать в TypeScript. Видимо, ни для кого уже не секрет, что на выходе из компилятора TypeScript мы получим JS код. Но идея была настолько популярна и востребована, что ИТ сообщество моментом подхватило такую инициативу. Доказательством этого может послужить наличие дополнений для TS в Vim, Emacs и даже в Visual Studio. Более того, вместе с выходом спецификации TS файлы, которые бы помогли понимать статическую типизацию, уже были среди JS-библиотек, среди которых оказался даже jQuery.
Как же быть? TS неявно типизирован и в то же время поддерживает статическую типизацию. Если тип возвращаемого значения не указан, компилятор выберет type inference для вывода типа. Например, если в функцию сложения двух чисел мы передадим 2 типа numbers , то очевидно что возвращаемое значение будет также number.
function add(left: number, right: number): number {
return left + right;
}
Но как раз прописывание возвращаемого значения позволяет компилятору проверить правильность. В случае, если тип не может быть выведен из-за отсутствия объявления типа, тогда по умолчанию будет динамический тип any.
Так же используя компилятор для TypeScript, Вам будет доступна опция создания отдельного файла декларации (тайпинга). Он будет иметь расширение .d.ts. В данном файле останутся только сигнатуры методов. Это напоминает заголовочный файл header в С/С++
declare module arithmetics {
add(left: number, right: number): number;
subtract(left: number, right: number): number;
multiply(left: number, right: number): number;
divide(left: number, right: number): number;
}
Такие файлы уже написаны за нас как для библиотек JS (таких как jQuery, AngularJS), так и для Node.js, забрать их можно на GITHUB
Резюмируя все вышесказанное, можно сделать вывод, что язык TypeScript будет интересен, понятен и очевиден разработчикам, которые знакомы с объектно-ориентированными подходами, привыкшие к четкому пониманию, какой тип будет ожидаемым на определённом этапе выполнения инструкций. Тем, кто привык рефакторить свой код перед публикацией, а не собирать отзывы от клиента. У этого языка уж точно есть будущее!
Рекомендації щодо планування роботи MS Outlook
Автор: Олександр Марченко
Введение
В прошлой статье мы начали знакомиться с особенностями планирования задач и встреч, используя раздел «Календарь». В этой статье мы определим основные 5 правил, которые позволят более эффективно управлять собственным временем.
Правило 1.
Разделяйте задачи на несколько категорий:
«Жесткие» задачи – выполнение которых назначено на заранее известное время и дату, и у вас нет возможности их перенести во времени и пространстве. Зачастую, такие встречи подразумевают вашу договоренность о точном времени с кем-либо, будь то ваш руководитель, клиент, партнер и т.д.
«Динамические» задачи – не имеющие четких временных ограничений, к примеру, «Забрать костюм из химчистки: сегодня». У вас есть возможность сделать это по пути на работу, во время обеденного перерыва, возвращаясь в офис после встречи с партнером, вовсе после работы по пути домой или даже воспользовавшись курьерской службой. Главное, что это нужно сделать сегодня.
«Плавающие» задачи – не имеющие четкого срока выполнения, т.е. то что нужно сделать с некоторыми затратами по времени. К примеру: «Заказать новую книгу на Amazon» - вам нужно 30 минут чтобы выбрать книгу и оформить заказ, вы можете сделать это в любое свободное время, и у вас нет четких дедлайнов.
Правило 2.
Поскольку встречи бывают разовые (как, скажем, собеседование с кандидатом), а могут быть регулярными, для управления повторяющимися событиями можно пользоваться автоматическими повторами:
Встречи, в которых настроено повторение, будут отображаться в календаре с круговыми стрелками в правом нижнем углу.
Правило 3.
Оставляйте не менее 30-40% времени в вашем резерве. У вас всегда будет потребность корректировать планы в зависимости от обстоятельств. Всегда помните, что «мы планируем что-то одно, а жизнь вносит свои коррективы».
Правило 4.
Для работы вне офиса стоит синхронизировать свой календарь со своим смартфоном, если у вас на работе не приветствуется концепция BYOD, распечатайте свой план на неделю и поместите в ежедневник. Так у вас будет шпаргалка, по которой вы сможете вести свои дела без промедлений и опозданий.
Правило 5.
Используйте четко сформулированные ключевые категории и определения для каждого проекта или направления.
Правильный вариант.
Неправильный вариант.
Соблюдая эти простые правила, вы сможете упростить процесс планирования и сделать его более прозрачным для себя и своих коллег. В следующей статье мы детально рассмотрим процесс создания задачи или события в календаре и приглашения других участников.
Властивість CSS3 box-shadow
Автор: Валерія Прокопенко
Введение
С приходом CSS3 в мир веб-разработки множества модных новинок, отображать потрясающий анимационный эффект стало доступным с помощью нескольких строчек кода. Сегодня мы рассмотрим одно из свойств CSS3 box-shadow и с его помощью научимся создавать такой элемент управления, как кнопка. Особенностью такого подхода является то, что компоненты на странице выглядят объемными и привлекательными, чем обращают на себя внимание пользователя.
Для начала создадим 3 слоя, которые и будут выступать в роли наших кнопок и опишем для них стили:
<!DOCTYPE html>
<html>
<head>
<title>Box-Shadowtitle>
<style type="text/css">
body {
background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);
}
.button {
width: 80px;
height: 80px;
margin: 30px;
display: inline-block;
cursor: pointer;
background: green;
}
.left {
border-radius: 50%;
}
.center {
border-radius: 20%;
}
.right {
border-radius: 50%;
}
style>
head>
<body>
<div class="button left">div>
<div class="button center">div>
<div class="button right">div>
body>
html>
В результате получим три зеленые кнопочки на фоне, который мы применили к телу нашего документа.
Теперь можно начать работу с box-shadow, но для начала познакомимся с его возможностями. Итак, данное свойство добавляет тень к нужному элементу, причем указав его параметры через запятую, можно применить несколько теней к одному компоненту и при их наложении первая в списке будет выше, а вторая ниже. Значение inset выводит тень внутрь элемента, но этот параметр не является обязательным.
Вооружившись знаниями о данном свойстве, можно приступить к созданию наших кнопок. Для начала изменим фон элементов на такой же, как у тела нашего документа. Теперь указываем параметры для box-shadow: первый отвечает за смешение по горизонтали, второй – по вертикали, третий - за радиус размытия, четвертый определяет цвет. Также используем значение inset, с помощью которого делаем внутреннюю верхнюю тень белой, а внутреннюю нижнюю - черной, при этом устанавливаем для них прозрачность, чтобы они не выглядели грубо.
<!DOCTYPE html>
<html>
<head>
<title>Box-Shadowtitle>
<style type="text/css">
body {
background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);
}
.button {
display: inline-block;
cursor: pointer;
margin: 30px;
width: 80px;
height: 80px;
background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);
box-shadow: 0 4px 22px rgba(0,0,0, 0.25), inset 0 3px 0 rgba(255,255,255, 0.5), 0 3px 0 rgba(0,0,0, 0.1), inset 0 0 22px rgba(0,0,0, 0.1);
}
.left {
border-radius: 50%;
}
.center {
border-radius: 20%;
}
.right {
border-radius: 50%;
}
style>
head>
<body>
<div class="button left">div>
<div class="button center">div>
<div class="button right">div>
body>
html>
В результате мы получили объемные формы, теперь сымитируем эффект нажатия при наведении на кнопку, для этого используем псевдокласс :hover и в нем опишем внутренние тени элементов, причем верхняя должна быть черной, а нижняя – белой, и не забываем установить прозрачность для данных элементов.
<!DOCTYPE html>
<html>
<head>
<title>Box-Shadowtitle>
<style type="text/css">
body {
background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);
}
.button {
display: inline-block;
cursor: pointer;
margin: 30px;
width: 80px;
height: 80px;
background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);
box-shadow: 0 4px 22px rgba(0,0,0, 0.25), inset 0 3px 0 rgba(255,255,255, 0.5), 0 3px 0 rgba(0,0,0, 0.1), inset 0 0 22px rgba(0,0,0, 0.1);
}
.left {
border-radius: 50%;
}
.center {
border-radius: 20%;
}
.right {
border-radius: 50%;
}
.button:hover {
box-shadow: inset 0 0 22px rgba(0,0,0,0.2), 0 3px 0 rgba(255,255,255,0.4),inset 0 3px 0 rgba(0,0,0,0.1), inset 0 0 22px rgba(0,0,0,0.1);
}
style>
head>
<body>
<div class="button left">div>
<div class="button center">div>
<div class="button right">div>
body>
html>
Следующее, что мы сделаем – это добавим иконки для наших кнопок, для этого мы используем псевдокласс :after и, чтобы усилить эффект вдавленности элемента при наведении, мы будем смещать картинки на 3% от начально положения.
<!DOCTYPE html>
<html>
<head>
<title>Box-Shadowtitle>
<style type="text/css">
body {
background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);
}
.button {
display: inline-block;
cursor: pointer;
margin: 30px;
width: 80px;
height: 80px;
background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);
box-shadow: 0 4px 22px rgba(0,0,0, 0.25), inset 0 3px 0 rgba(255,255,255, 0.5), 0 3px 0 rgba(0,0,0, 0.1), inset 0 0 22px rgba(0,0,0, 0.1);
-moz-box-shadow: 0 4px 22px rgba(0,0,0, 0.25), inset 0 3px 0 rgba(255,255,255, 0.5), 0 3px 0 rgba(0,0,0, 0.1), inset 0 0 22px rgba(0,0,0, 0.1);
-webkit-box-shadow: 0 4px 22px rgba(0,0,0, 0.25), inset 0 3px 0 rgba(255,255,255, 0.5), 0 3px 0 rgba(0,0,0, 0.1), inset 0 0 22px rgba(0,0,0, 0.1);
}
.left {
border-radius: 50%;
}
.center {
border-radius: 20%;
}
.right {
border-radius: 50%;
}
.button:hover {
box-shadow: inset 0 0 22px rgba(0,0,0,0.2), 0 3px 0 rgba(255,255,255,0.4),inset 0 3px 0 rgba(0,0,0,0.1), inset 0 0 22px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 0 22px rgba(0,0,0,0.2), 0 3px 0 rgba(255,255,255,0.4),inset 0 3px 0 rgba(0,0,0,0.1), inset 0 0 22px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 0 22px rgba(0,0,0,0.2), 0 3px 0 rgba(255,255,255,0.4),inset 0 3px 0 rgba(0,0,0,0.1), inset 0 0 22px rgba(0,0,0,0.1);
}
.button::after {
content: '';
width: 80px;
height: 80px;
display: block;
opacity: 0.7;
}
.left::after {
background: url(http://www.defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/MD-previous.png?itok=Myj2aYPA);
background-repeat: no-repeat;
background-position: 50%;
}
.center::after {
background: url(http://www.defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/MD-play.png?itok=iQrN1tL3);
background-repeat: no-repeat;
background-position: 50%;
}
.right::after {
background: url(http://www.defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/MD-next.png?itok=LBqF9Nod);
background-repeat: no-repeat;
background-position: 50%;
}
.button:hover::after {
background-position: center 53%;
}
style>
head>
<body>
<div class="button left">div>
<div class="button center">div>
<div class="button right">div>
body>
html>
Как видим, CSS3 делает жизнь разработчика намного проще, предоставляя множество интересных и простых в использовании плюшек.
WebForms чи MVC?
Автор: Редакция ITVDN
Введение
Когда в 2008 году компания Microsoft придумала ASP.NET MVC, у многих возник вопрос: «Зачем нужна ещё одна технология ASP.NET?».
Многие считают, что ASP.NET MVC не обязательно использовать, заменив на Web Forms ASP.NET. Однако, это неправда. Оба имеют свои плюсы и минусы. В статье мы рассмотрим преимущества этих двух технологий – и каждый сможет определиться, какая из них ему ближе. Мы также объясним понятия ASP.NET, ASP.NET Web Forms, MVC, ASP.NET MVC.
Опытным разработчикам в ASP.NET MVC данная статья поможет переосмыслить свои концепции.
Web-технологии
Когда речь идёт о web-технологиях, на ум приходит классический ASP, PHP, JSP, ROR, ASP.NET Web Forms, ASP.NET MVC и другое. Классический ASP - web-технология, созданная корпорацией Microsoft. У классического ASP было два недостатка: слишком большой, неудобный исходный код и ненадёжность. К примеру, у Вас есть текстовые поля и кнопка. Нажав на кнопку, можно проверить данные, хранящиеся на сервере. Успешная проверка означает, что данные хранятся в базе, а в обратном случае выведется определённое сообщение об ошибке. В чём проблема такого сценария? Вам нужно совершить много действий.
Приложение ASP.NET
ASP.NET – приложение Microsoft, его структура построена на всеязыковой среде выполнения для построения динамических веб-сайтов – для создания можно использовать такие языки: C#, VB.NET и другие. ASP.NET поддерживает две модели: Web Forms и ASP.NET MVC.
ASP.NET Web Forms
Корпорация Microsoft первой вывела ASP.NET Web Forms из ASP, таким образом они решили множество проблем путём создания высокого уровня абстрагирования. Web Forms включает в себя postback (постит данные на заданную страницу) и ViewState. И самое интересное в том, что для ASP.NET Web Forms не требуется написания вручную ни единой строчки кода.
ASP.NET 4.0
В ASP.NET 4.0 придумали, как преодолеть некоторые трудности:
появилась возможность отключать и контролировать размер ViewState;
с URL routing можно предоставить собственный URL вместо физического пути;
в ASP.NET 4.0 мы имеем лучший контроль над ID элементов и, таким образом, интеграция с платформой JavaScript стала проще.
Шаблон MVC
MVC – архитектурный шаблон. Многие используют его с Java-технологией. MVC – не новое понятие, созданное Microsoft. Однако, в MVC ASP.NET нужно разобраться. До этого стоит уточнить для себя некоторые определения – в том числе, что такое MVC.
Архитектурный шаблон – то, что решает наш вопрос на суб-системном уровне или на коротком уровне модуля. Речь идет о проблеме, связанной с архитектурой проекта. Это говорит о том, как можно разделить системы, а в частности - почему. Создаются библиотеки классов, компоненты, веб-сервисы, чтобы решить данный вопрос.
MVC – архитектурный шаблон, позволяющий уловить тонкую связь между input-логикой, бизнес-логикой и UI-логикой.
Платформа ASP.NET MVC
ASP.NET MVC – еще одна платформа web-приложений от Microsoft. В ней устранены недостатки, имеющие место в предыдущих, подобного типа платформах. Эта платформа построена на всеязыковой среде выполнения (CLR) и полностью основана на MVC-архитектуре.
Источник: http://www.codeproject.com/Articles/528117/WebForms-vs-MVC#Visual_in_Web
Як розпочати навчання веб-розробці
Автор: Редакция ITVDN
Введение
В этой статье мы рассмотрим некоторые инструменты, книги и ресурсы о том, как начать обучение веб-разработке. Эта статья направлена на тех, кто уже работал с HTML, CSS и JavaScript.
Зачем учиться веб-разработке?
Одно из главных преимуществ обучения веб-разработке – Вы получите навыки работы с большим количеством клиентов, проектов, а также научитесь контролировать собственный рабочий процесс.
С чего начать?
Ниже мы рассмотрим четыре языка программирования, которые стоит рассматривать прежде всего.
HTML5
HTML5 – последняя спецификация HTML. Он идет рука об руку с CSS3, новейшим образцом CSS. Новая спецификация HTML позволяет создавать приложения для браузера и мобильного устройства.
CSS3
С помощью CSS3 Вы сможете сделать разметку более стильной и профессиональной. Если Вы чувствуете себя достаточно опытным в CSS3, Вам стоит прочитать SVG книги.
LESS
LESS – это надстройка CSS, она расширяет язык CSS, добавляет в него динамику. Он вводит переменные, операции, function-like элементы. Возможность писать таблицы стилей упростит и улучшит написание кода.
Less работает в браузере, в Node и Rhino.
SASS
Таблицы стилей становятся больше и сложнее. В работе с ними может помочь препроцессор. Sass позволяет использовать функции, не существующие в CSS, например, переменные, возможность наследования и многое другое.
Составители для LESS и SASS
LESS и SASS - надстройки, поэтому Вам понадобится компилятор для преобразования результата.
CodeKit
CodeKit – одно из лучших приложений для разработчиков и дизайнеров, работающих на Mac. CodeKit следит за всем, что Вы создаете. Приложение может исправлять ошибки и составлять код самостоятельно.
Prepros
Prepros – GUI-компилятор, предназначенный для предварительной обработки таких языков: Compass, LESS, Sass, Jade, Stylus, Slim, Markdown, CoffeeScript и Haml. Prepros также может обновить браузер, когда Вы меняете свой код в редакторе. С Prepros можно работать и тем, у кого система Windows.
Текстовые редакторы для веб-разработчиков
Sublime Text
Sublime Text – текстовый редактор для кода разметки. В нем легкий пользовательский интерфейс, он удобен в эксплуатации.
Atom
Этот современный текстовый редактор начал пользоваться успехом совсем недавно, и этот проект пока не идеален. Он был создан веб-сервисом GitHub. Atom состоит из 50 модулей вокруг небольшого ядра с открытым кодом. Его цель - глубоко расширяемая система, стирающая различие между пользователем и разработчиком.
Обучение веб-разработке с помощью книг
Book Apart управляют люди, знающие веб лучше, чем 99% пользователей. Содержание этих книг всегда наивысшего качества, их легко читать, и они обеспечивают понимание процесса создания веб-сайтов.
HTML5 для веб-дизайнеров
Спецификация HTML5 состоит из 900 страниц, достаточно трудных для понимания. HTML5 для веб-дизайнеров - 85 интересных страниц. Когда Вы закончите ее читать, Вы не будете задавать себе вопрос, что такое HTML5, как он работает, или что нужно делать, чтобы стать лучшим веб-разработчиком. Эта небольшая книга рассказывает про все в легкой и сжатой форме.
CSS3 для веб-разработчиков
Если Вы не знаете, с чего начинать обучение CSS3, купите книгу Дэна Седерхольма (Dan Cederholm) (соучредитель Dribbble). Она содержит информацию о расширенных функциях, селекторах, а также о CSS3-анимации.
Sass для веб-дизайнеров
Sass может помочь создать интерактивные элементы. Дэн Седерхольм (Dan Cederholm) выпустил книгу, рассказывающую о Sass — процессоре предварительной обработки CSS. Это поможет нам взглянуть на CSS с другой стороны.
Адаптивный веб-дизайн
Чем больше предприятий создают страницы в интернете, тем больше спрос на разработчиков, способных написать код на современных языках программирования. Автор книги по адаптивному веб-дизайну - Итан Маркотт (Ethan Marcotte).
Источник: http://codecondo.com/web-designers-want-become-web-developers/
Створення секундоміра за допомогою CSS3
Автор: Редакция ITVDN
Введение
В этой статье Вы научитесь создавать секундомер, используя HTML5 и CSS3. Мы рассмотрим CSS3 анимацию с тремя кнопками: старт, остановка и сброс. Запуск начинает работу секундомера, стоп – останавливает секундомер, и кнопка сброса сбрасывает секундомер.
Основная логика создания секундомера очень простая, Вы будете использовать простой контейнер div, содержащий цифры, они будут увеличиваться с помощью ключевого кадра анимации.
Сначала создайте div (содержащий числа) с помощью кода HTML:
<!doctype html>
<html>
<head>
<title>Stopwatchtitle>
<link rel="stylesheet" href="Style.css" />
head>
<body>
<div class="number">0 1 2 3 4 5 6 7 8 9div>
body>
html>
Вот результат предыдущего кода:
Теперь Вам нужно выровнять числа по вертикали за счет уменьшения ширины контейнера. Итак, создайте файл CSS (styles.css) и введите следующий код в этот CSS-файл.
* {
margin: 0;
padding: 0;
}
.numbers {
width: 10px;
}
Согласно предыдущему коду, Ваши цифры будут выровнены вертикально:
Теперь используем цифровые шрифты, Вы можете скачать их с сайта ds-digi.font. Используйте следующий код CSS, чтобы изменить шрифт:
.number {
width: 10px;
font-family: digital, arial, verdana;
font-size: 50px;
}
@font-face {
font-family: 'digital';
src: url('DS-DIGI.TTF');
}
Результат такого кода:
Давайте поместим числа в поле для отображения только одной цифры. Таким образом, в HTML-файле поместите div с цифрами в другой div. Код будет таким:
<div class="box">
<div class="number">0 1 2 3 4 5 6 7 8 9div>
div>
Теперь примените такие настройки CSS, чтобы отображать только одну цифру.
.box {
width: 40px;
height: 40px;
border: 1px solid #000;
font-size: 50px;
overflow: hidden;
}
.number {
width: 40px;
line-height: 40px;
font-family: digital, arial, verdana;
text-align: center;
}
Таким будет результат:
Давайте создадим анимацию цифр, так как это главная задача статьи. Логика анимации – изменить значение top position absolute от 0 до -400 px, потому что высота поля 40 px, а у нас есть цифры от 0 до 9, то есть в общей сложности 10 цифр, так что 40 * 10 = 400, Вы будете менять верхнюю от 0 до -400 px. Вот так выглядит код файла style.css:
.box {
width: 40px;
height: 40px;
border: 1px solid #000;
font-size: 50px;
overflow: hidden;
position: relative;
}
.number {
width: 40px;
line-height: 40px;
font-family: digital, arial, verdana;
text-align: center;
position: absolute;
top: 0;
left: 0;
-webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */
animation: moveup 1s steps(10, end) infinite;
}
@-webkit-keyframes moveup {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@keyframes moveup {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
Вот каким будет результат:
Вы можете увидеть, что цифры заменяются, а не перемещаются вверх пиксель за пикселем. Теперь создайте еще несколько div: два для часов, два для минут, два для секунд и три для мили-секунд.
<!doctype html>
<html>
<head>
<title>Stopwatchtitle>
<link rel="stylesheet" href="Style.css" />
head>
<body>
<div class="stopwatch">
<div class="box">
<div class="number tensPlaceHours">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number onesPlaceHours">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number tensPlaceMinutes">0 1 2 3 4 5 6div>
div>
<div class="box">
<div class="number onesPlaceMinutes">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number tensPlaceSeconds">0 1 2 3 4 5 6div>
div>
<div class="box">
<div class="number onesPlaceSeconds">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number onesPlaceMiliSeconds">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number tensPlaceMiliSeconds">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number hundredsPlaceMiliSeconds">0 1 2 3 4 5 6 7 8 9div>
div>
div>
body>
html>
Результат предыдущего кода:
Теперь установите float left для всех div, как указано ниже.
.box {
width: 40px;
height: 40px;
border: 1px solid #000;
font-size: 50px;
overflow: hidden;
position: relative;
}
После применения float left мы получим такой результат:
Таким образом, максимальное значение минут и секунд будет 60. Вы должны создать две анимации, одна из которых будет 10-шаговой и 10-цифровой, и одна 6-шаговой, и только 6-цифровой. Используйте следующий код CSS для этого:
* {
margin: 0;
padding: 0;
}
.box {
width: 40px;
height: 40px;
border: 1px solid #000;
font-size: 50px;
overflow: hidden;
position: relative;
float: left;
}
.number {
width: 40px;
line-height: 40px;
font-family: digital, arial, verdana;
text-align: center;
position: absolute;
top: 0;
left: 0;
-webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */
animation: moveup 1s steps(10, end) infinite;
}
.moveuptens {
-webkit-animation: moveuptens 1s steps(10, end) infinite; /* Chrome, Safari, Opera */
animation: moveuptens 1s steps(10, end) infinite;
}
.moveupsix {
-webkit-animation: moveupsix 1s steps(6, end) infinite; /* Chrome, Safari, Opera */
animation: moveupsix 1s steps(6, end) infinite;
}
@-webkit-keyframes moveup {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@keyframes moveup {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@-webkit-keyframes moveuptens {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@keyframes moveuptens {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@-webkit-keyframes moveupsix {
0% {
top: 0px;
}
100% {
top: -240px;
}
}
@keyframes moveupsix {
0% {
top: 0px;
}
100% {
top: -240px;
}
}
@font-face {
font-family: 'digital';
src: url('DS-DIGI.TTF');
}
Теперь, после создания предыдущих анимаций, примените класс CSS к HTML следующим образом:
<div class="stopwatch">
<div class="box">
<div class="number tensPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number onesPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number tensPlaceMinutes moveupsix">0 1 2 3 4 5 6div>
div>
<div class="box">
<div class="number onesPlaceMinutes moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number tensPlaceSeconds moveupsix">0 1 2 3 4 5 6div>
div>
<div class="box">
<div class="number onesPlaceSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number onesPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number tensPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number hundredsPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
div>
Таким будет результат:
Теперь Вам нужно синхронизировать скорость анимации со скоростью времени. Примените следующие свойства:
.onesPlaceSeconds {
animation-duration: 10s;
-webkit-animation-duration: 10s;
}
.tensPlaceSeconds {
animation-duration: 60s;
-webkit-animation-duration: 60s;
}
.hundredsPlaceMiliSeconds {
animation-duration: 1s;
-webkit-animation-duration: 1s;
}
/*1/10th of .second*/
.tensPlaceMiliSeconds {
animation-duration: 0.1s;
-webkit-animation-duration: 0.1s;
}
.hundredsPlaceMiliSeconds {
animation-duration: 0.01s;
-webkit-animation-duration: 0.01s;
}
.onesPlaceMinutes {
animation-duration: 600s;
-webkit-animation-duration: 600s;
}
/*60 times .second*/
.tensPlaceMinutes {
animation-duration: 3600s;
-webkit-animation-duration: 3600s;
}
/*60 times .minute*/
.onesPlaceHours {
animation-duration: 36000s;
-webkit-animation-duration: 36000s;
}
/*60 times .minute*/
.tensPlaceHours {
animation-duration: 360000s;
-webkit-animation-duration: 360000s;
}
/*10 times .hour*/
Вот таким будет результат:
Вы можете увидеть, что сейчас с секундомером все в порядке. Теперь добавьте стили к секундомеру. Модифицируйте HTML и CSS.
HTML-файл:
<!doctype html>
<html>
<head>
<title>Stopwatchtitle>
<link rel="stylesheet" href="Style.css" />
head>
<body>
<!doctype html>
<html>
<head>
<title>Stopwatchtitle>
<link rel="stylesheet" href="Style.css" />
head>
<body>
<div class="MainContainer">
<div class="stopwatch">
<div class="box">
<div class="number tensPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number onesPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number tensPlaceMinutes moveupsix">0 1 2 3 4 5 6div>
div>
<div class="box">
<div class="number onesPlaceMinutes moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number tensPlaceSeconds moveupsix">0 1 2 3 4 5 6div>
div>
<div class="box">
<div class="number onesPlaceSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number onesPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number tensPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number hundredsPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
div>
div>
body>
html>
CSS-файл:
* {
margin: 0;
padding: 0;
}
body {
background: url(images.jpg);
}
.MainContainer {
padding: 200px;
text-align: center;
}
.stopwatch {
padding: 10px;
background: linear-gradient(top, #222, #444);
overflow: hidden;
display: inline-block;
border: 7px solid #eeeeee;
border-radius: 20px;
box;
}
.box {
width: 40px;
height: 40px;
font-size: 50px;
overflow: hidden;
position: relative;
float: left;
}
.number {
width: 40px;
line-height: 40px;
font-family: digital, arial, verdana;
text-align: center;
color: #fff;
position: absolute;
top: 0;
left: 0;
-webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */
animation: moveup 1s steps(10, end) infinite;
}
.moveuptens {
-webkit-animation: moveuptens 1s steps(10, end) infinite; /* Chrome, Safari, Opera */
animation: moveuptens 1s steps(10, end) infinite;
}
.moveupsix {
-webkit-animation: moveupsix 1s steps(6, end) infinite; /* Chrome, Safari, Opera */
animation: moveupsix 1s steps(6, end) infinite;
}
.onesPlaceSeconds {
animation-duration: 10s;
-webkit-animation-duration: 10s;
}
.tensPlaceSeconds {
animation-duration: 60s;
-webkit-animation-duration: 60s;
}
.onesPlaceMiliSeconds {
animation-duration: 1s;
-webkit-animation-duration: 1s;
}
/*1/10th of .second*/
.tensPlaceMiliSeconds {
animation-duration: 0.1s;
-webkit-animation-duration: 0.1s;
}
.hundredsPlaceMiliSeconds {
animation-duration: 0.01s;
-webkit-animation-duration: 0.01s;
}
.onesPlaceMinutes {
animation-duration: 600s;
-webkit-animation-duration: 600s;
}
/*60 times .second*/
.tensPlaceMinutes {
animation-duration: 3600s;
-webkit-animation-duration: 3600s;
}
/*60 times .minute*/
.onesPlaceHours {
animation-duration: 36000s;
-webkit-animation-duration: 36000s;
}
/*60 times .minute*/
.tensPlaceHours {
animation-duration: 360000s;
-webkit-animation-duration: 360000s;
}
/*10 times .hour*/
@-webkit-keyframes moveup {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@keyframes moveup {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@-webkit-keyframes moveuptens {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@keyframes moveuptens {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@-webkit-keyframes moveupsix {
0% {
top: 0px;
}
100% {
top: -240px;
}
}
@keyframes moveupsix {
0% {
top: 0px;
}
100% {
top: -240px;
}
}
@font-face {
font-family: 'digital';
src: url('DS-DIGI.TTF');
}
После применения некоторых стилей результат будет следующим:
Теперь добавьте 3 кнопки типа radio для запуска, остановки и сброса секундомера. Эти кнопки будут управлять секундомером.
HTML-код:
<!doctype html>
<html>
<head>
<title>Stopwatchtitle>
<link rel="stylesheet" href="Style.css" />
head>
<body>
<div class="MainContainer">
<input id="start" name="controls" type="radio" />
<input id="stop" name="controls" type="radio" />
<input id="reset" name="controls" type="radio" />
<div class="stopwatch">
<div class="box">
<div class="number tensPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number onesPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number tensPlaceMinutes moveupsix">0 1 2 3 4 5 6div>
div>
<div class="box">
<div class="number onesPlaceMinutes moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number tensPlaceSeconds moveupsix">0 1 2 3 4 5 6div>
div>
<div class="box">
<div class="number onesPlaceSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number onesPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number tensPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number hundredsPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
div>
<div id="stopwatch_controls">
<label for="start">Startlabel>
<label for="stop">Stoplabel>
<label for="reset">Resetlabel>
div>
div>
body>
html>
Теперь измените код CSS для стилизации элементов управления секундомером:
* {
margin: 0;
padding: 0;
}
body {
background: url(images.jpg);
}
.MainContainer {
padding: 200px;
text-align: center;
}
.stopwatch {
padding: 10px;
background: linear-gradient(top, #222, #444);
overflow: hidden;
display: inline-block;
border: 7px solid #eeeeee;
border-radius: 20px;
box;
}
.box {
width: 40px;
height: 40px;
font-size: 50px;
overflow: hidden;
position: relative;
float: left;
}
.number {
width: 40px;
line-height: 40px;
font-family: digital, arial, verdana;
text-align: center;
color: #fff;
position: absolute;
top: 0;
left: 0;
-webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */
animation: moveup 1s steps(10, end) infinite;
}
#stopwatch_controls label {
cursor: pointer;
padding: 5px 10px;
background: #eeeeee;
font-family: arial, verdana, tahoma;
font-size: 20px;
border-radius: 0 0 3px 3px;
}
input[name="controls"] {
display: none;
}
#stop:checked ~ .stopwatch .number {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
#start:checked ~ .stopwatch .number {
animation-play-state: running;
-webkit-animation-play-state: running;
}
#reset:checked ~ .stopwatch .number {
animation: none;
-webkit-animation: none;
}
.moveuptens {
-webkit-animation: moveuptens 1s steps(10, end) infinite; /* Chrome, Safari, Opera */
animation: moveuptens 1s steps(10, end) infinite;
/*By default animation will be paused*/
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.moveupsix {
-webkit-animation: moveupsix 1s steps(6, end) infinite; /* Chrome, Safari, Opera */
animation: moveupsix 1s steps(6, end) infinite;
/*By default animation will be paused*/
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.onesPlaceSeconds {
animation-duration: 10s;
-webkit-animation-duration: 10s;
}
.tensPlaceSeconds {
animation-duration: 60s;
-webkit-animation-duration: 60s;
}
.onesPlaceMiliSeconds {
animation-duration: 1s;
-webkit-animation-duration: 1s;
}
/*1/10th of .second*/
.tensPlaceMiliSeconds {
animation-duration: 0.1s;
-webkit-animation-duration: 0.1s;
}
.hundredsPlaceMiliSeconds {
animation-duration: 0.01s;
-webkit-animation-duration: 0.01s;
}
.onesPlaceMinutes {
animation-duration: 600s;
-webkit-animation-duration: 600s;
}
/*60 times .second*/
.tensPlaceMinutes {
animation-duration: 3600s;
-webkit-animation-duration: 3600s;
}
/*60 times .minute*/
.onesPlaceHours {
animation-duration: 36000s;
-webkit-animation-duration: 36000s;
}
/*60 times .minute*/
.tensPlaceHours {
animation-duration: 360000s;
-webkit-animation-duration: 360000s;
}
/*10 times .hour*/
@-webkit-keyframes moveup {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@keyframes moveup {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@-webkit-keyframes moveuptens {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@keyframes moveuptens {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@-webkit-keyframes moveupsix {
0% {
top: 0px;
}
100% {
top: -240px;
}
}
@keyframes moveupsix {
0% {
top: 0px;
}
100% {
top: -240px;
}
}
@font-face {
font-family: 'digital';
src: url('DS-DIGI.TTF');
}
Финальный результат
Источник: http://www.c-sharpcorner.com/UploadFile/75a48f/stopwatch-using-css3/
Метрики програмного забезпечення у Visual Studio
Автор: Артем Верещака
Введение
Метрика программного обеспечения (англ. Software metric) – это некая мера определенного свойства программного обеспечения или же его спецификаций. Как известно, мера – это средство измерения. Важно понять, что мера - это числовое значение. Таким образом, метрика программного обеспечения будет показывать некое числовое значение определенного свойства ПО.
Мы не будем углубляться в теорию, так как ее можно найти в свободном доступе довольно легко. Мы займемся практической частью данного вопроса. А именно: как нам использовать метрики для улучшения кода?
Метрики в Visual Studio
Стоит заметить сразу, что метрики подвергаются критике. Это, как минимум, поверхностно и неточно. Мы вернемся к этому после того, как поймем о чем речь. Рассматривать мы будет все на примере Visual Studio 2015 RC. Сперва, откроем проект для изучения.
Далее, мы можем видеть вкладку Analyze
В этой вкладке мы видим Calculate Code Metrics for ...
Это нам и нужно. Разница лишь в том, что будет анализироваться. Или же выбранные проекты в Solution Explorer, или же сразу весь Solution. После нажатия придется немного подождать. Время зависит от конфигурации Вашего компьютера. Когда анализ будет завершен, Вы увидите внизу окно
Здесь будет видна иерархия всего Solution. В моем случае это отдельная dll библиотека и проект. Когда развернем библиотеку, мы увидим следующий уровень иерархии, и так далее
Теперь давайте разберемся со столбцами дальше.
1. Maintainability Index – это комплексный показатель качества кода. Эта метрика рассчитывается по следующей формуле:
MI = MAX(0, (171 — 5.2 * ln(HV) — 0.23 * CC — 16.2 * ln(LoC)) * 100 / 171)
HV – Halstead Volume, вычислительная сложность. Чем больше операторов, тем больше значение этой метрики;
CC – Cyclomatic Complexity (Эта метрика описана ниже);
LoC – количество строк кода (Эта метрика описана ниже).
2. Cyclomatic Complexity – показывает структурную сложность кода. Иными словами, количество различных ветвей кода. Считается на основе операторов в Вашем коде, строя графы переходов от одного оператора к другому. К примеру, оператор if-else увеличит эту метрику, потому что здесь будут разные ветви выполнения.
3. Depth of Inheritance – глубина наследования. Для каждого класса эта метрика показывает, насколько глубоко он в цепочке наследования.
4. Class Coupling – указывает на зависимость классов друг от друга. Проект с множеством зависимостей очень трудно и дорого поддерживать.
5. Lines of Code – количество строк кода. Напрямую используется редко. В наши дни, с множеством разнообразных как подходов к программированию, так и языков, эта метрика дает нам мало полезной информации. Если брать во внимание отдельный метод, то можно разбить его на несколько методов поменьше.
Использования метрик
Изначально стоит обращать внимание на Maintainability Index. Старайтесь придерживать его около 70-90. Это значительно облегчит сопровождения кода как Вами, так и другими программистами. Иногда стоит оставить его на уровне 50-60, так как переписать некоторые участки кода бывает очень затратным. Оценивайте здраво как код, так и Ваши возможности с затратами.
Стоит также уделить много внимания Class Coupling. Эта метрика должна быть как можно меньшей. Ведь она так же способствует поддержке кода. Для оптимизации возможно придется пересматривать дизайн проекта и некоторые архитектурные решения.
Теперь стоит уделить внимание Cyclomatic Complexity. Эта метрика показывает сложность кода, а это так же влияет на поддержку кода в будущем. Иногда приходится переписывать куски кода, которые писали до Вас другие люди, так как Вы просто не можете понять, что, как и зачем в этом методе. Конечно, этому еще способствует стиль кода и идея, но не забывайте о Cyclomatic Complexity при рефакторинге.
Критика
А теперь вернемся к критике. Вы, наверняка, заметили, что мы использовали на практике не все метрики, но они могут быть частью остальных, как в случае с Maintainability Index. Но стоит понимать, что оценивать качество работы программиста, исходя из метрик, нельзя. Это очень неточно и поверхностно. Иногда просто нет другого способа решения задачи, а иногда это бывает затратным. Также есть человеческий фактор, о котором не стоит забывать. Метрики бывают искаженными, ведь программист может стремится написать не эффективное и правильно решение, а оптимизировать показатели этих же метрик.
Вывод
С таким инструментом в руках Вы можете быстро и относительно легко сделать review проекта и найти его уязвимые места. Также можно постоянно мониторить метрики и делать даже некие выводы об усталости работника или его отношении к работе. Более того, можно увидеть динамику роста качества кода каждого программиста. Но здесь стоит отчетливо понимать все детали так, как мы говорили об этом в критике.
Ну и одно из самых важных, следить за недопустимыми значениями, при которых хорошо было бы провести рефакторинг кода.
Поради та хитрощі SEO 2015: підняття рейтингу блогерів
Автор: Редакция ITVDN
Введение
Каждый блогер хочет поднять рейтинг в поисковых системах. В данной статье рассматриваются лучшие советы и хитрости 2015 года, способствующие поднятию рейтинга во всех поисковых системах. SEO помогает сделать блог доступным для поисковых систем, чтобы увеличить шансы быть найденным по указанным запросам или ключевым словам.
Если Вы новичок, Вам будет полезно узнать, что поисковые системы используют собственные алгоритмы, компьютерные программы. Человек может читать текст, просматривать изображения и видео, но поисковые системы работают совершенно иначе, поскольку они не могут понять изображение или видео самостоятельно.
Пример:
Если вы хотите, чтобы нашли именно Вашу фотографию, Вы должны дать ей собственное имя, например, Ваше имя и фамилию, и только тогда, когда кто-то будет искать Вашу фотографию, Google (или другие поисковые системы) покажет именно Вашу картинку в результатах.
Работая с SEO, вы должны понять разницу между поисковой оптимизацией и человеческим восприятием.
Советы и хитрости SEO 2015 для блогеров
Существует сотни SEO советов, как поднять рейтинг, но в этой статье рассмотрены лишь немногие из них, гарантирующих результаты на длительный срок. Обычно люди начинают вести блог, чтобы поделиться ценным опытом и информацией со своей аудиторией. Но для некоторых блоги – единственный источник дохода. Каждый блогер, независимо от того, начинал он свой блог для развлечения своих читателей или для заработка, может добиться увеличения трафика только из-за хорошей позиции в поисковых системах.
Если Вы будете знать о хитростях и секретах SEO, Вам не нужно будет переживать из-за panda и других Google обновлений.
SEO BY YOAST
Движок WordPress часто используется в блогах, существует плагин SEO для WP, известный как WordPress SEO by Yoast. Он отвечает стандартам советов SEO 2015. Поэтому прежде чем начать, Вам нужно установить плагин в блоге.
1. Оптимизация заголовка или оптимизация тегов title
На картинке выше синим текстом выделено "Советы и хитрости SEO 2015 для повышения рейтинга для блогеров". Это название поста или тег title.
Как можно лучше оптимизировать тег title?
С помощью нашего ключевого слова и комплектующей фразы. Настоятельно рекомендуется разместить Ваше запланированное ключевое слово в начале названия. Заголовок страницы может быть фразой или предложением с лимитом от 40 до 70 символов.
2. Оптимизация мета-тега description
В мета-теге description содержится текст, состоящий из двух строк, показанный на результате выдачи поисковой системы. Этот мета-тег ограничен только 156 символами, поэтому Вы должны написать броский текст в 156 символов, включая ключевое слово, чтобы улучшить результаты поиска.
3. Пост с заголовками и подзаголовками
Использование заголовков и подзаголовков украсит Ваш пост, сделает его проще и приятнее для аудитории. Используйте заголовки и подзаголовки, чтобы выделить важные моменты и привлечь внимание читателей.
Пост с заголовком и подзаголовком нужен не только для читателей, но и для поисковых систем, так как важно включить в подзаголовки и заголовки ключевые слова.
Заголовки должны быть помещены в теги от h1 до h6, иначе поисковая система не сможет их узнать. Также Вы можете использовать жирное начертание заголовков.
4. Использование ключевых слов и их плотность
Используйте ключевые слова в плотности максимум 2 % – 3 %. Вы можете включать их в заголовки и параграфы, где это необходимо. Ключевое слово в начале заголовка, первого параграфа и в последней строчке поста будет особенно эффективным.
5. Пишите для людей, не для роботов
Большинство блогеров не знают, для кого они пишут. Пишите интересные посты, задавайте в них вопросы аудитории, чтобы привлечь внимание Ваших пользователей, заставить их оставить комментарий под постом. Также Вы можете представить информацию таким образом, чтобы люди делились ею в социальных сетях, это тоже важно для поисковых систем.
Внимание: Если вы пишете контент только для роботов, то в скором времени Вы будете сожалеть об этом.
6. Использование медиа в блоге
Есть разные типы информации: PDF, аудио, видео, инфографика, фотоиллюстрации, другие изображения и т.д. Использование медиа в блоге привлечет внимание читателей и сделает их пребывание на ресурсе более долгим, чем обычно. Это очень полезно для SEO, потому что поисковые системы получат более четкое представление о Вашем контенте, и это может улучшить его индексацию для будущих запросов.
Предупреждение: Не используйте неподходящий медиа-контент.
PS: Броское, подходящее изображение в начале поста будет убеждать Ваших читателей прокрутить страничку вниз и просмотреть остальную информацию на странице.
7. Наличие внутренних ссылок или оптимизация ссылок в посте
Если у вас есть другие посты в блогах на похожую тему, Вы должны связать их в Вашем посте. Название и/или краткое описание вместе с ссылкой на другой пост может быть использовано на Вашей страничке.
Это увеличит шансы посещения других Ваших постов и срок пребывание читателей на Вашем сайте.
Совет для оптимизации внутренних ссылок: использование ключевого слова как якоря добавит ценности этому ключевому слову в поисковой системе.
8. Исходящие ссылки
Наличие исходящих ссылок означает, что Вы использовали информацию с других источников в посте. Другими словами, Вы таким образом перенаправляете траффик на другие ресурсы.
Почему это нужно делать?
Например, Вы взяли какую-то информацию из Википедии, для сохранения хорошей репутации нужно указать URL-ссылку на Википедию в Вашем посте.
Использование ссылок на авторитетные сайты не повлияет негативно на Ваш блог, однако это улучшит качество Ваших постов и вызовет уважение у Ваших читателей.
9. Google Adwords Keyword Planner для подбора лучшего заголовка
Google Adwords Keyword Planner – идеальный внешний инструмент, чтобы выбрать ключевые слова контента Вашего блога в соответствии с ежемесячными поисковыми запросами.
Если Вы хотите написать пост, Вы можете найти ключевое слово в adwords keyword planner, затем поместить его в начало названия.
10. Использование SEO-friendly URL-адреса
Использование SEO-friendly URL-адреса означает включение ключевого слово в URL, это может улучшить место в выдаче поисковой системы.
Если Вы используете WordPress, Вы можете настроить постоянные ссылки: Dashboard >> Settings >> Permalinks.
11. Используйте длинные ключевые слова или ключевые фразы
Нужно использовать длинные ключевые слова в Ваших постах. Если Вы хотите написать про SEO, откройте Google AdWords. Попробуйте различные соответствующие ключевые слова и ежемесячные поисковые запросы, такие как: SEO, SEO tips and Tricks, SEO tips2015, SEO tricks, SEO tips , SEO tricks and tips, SEO for bloggers, bloggers SEO tricks and tips, bloggers SEO tips and tricks, и так далее.
Из результатов Вы можете выбрать ключевые слова с небольшой конкуренцией, но большой частотой запросов. Включайте данные ключевые слова в заголовок Вашего поста. Использование длинных ключевых слов не только увеличит позицию в поиске, но также улучшит рейтинг Вашего блога в разных поисковых системах.
12. Создание категорий
Создание категорий действительно важно для индексации в поисковых системах, но также это полезно для пользователя. Это поможет пользователям находить интересующие их посты в Вашем блоге. Вы также можете создать категории для общих тем.
13. Обновляйте свой блог регулярно
Постоянно обновляйте свой блог, добавляя новый контент, изображения, а также последние новости, чтобы привлечь внимание Вашей обычной аудитории и поисковых систем. Новые статьи будут появляться в поисковых системах мгновенно, если у Вас будет достаточно посещений в день. Если Вы публикуете 3 поста в день, делайте это постоянно, не следует в один день публиковать 5 постов, а в другой день – ни одного.
14. Поддерживайте отношения с другими блогерами
Поддерживать хорошие отношения с другими блогерами очень важно для Вашего собственного успеха.
Источник: http://www.etcpb.com/seo-tips-and-tricks-2015/
Елементарні та посилання типи
Автор: Олександр Марченко
Введение
Элементарные и ссылочные типы, или элементарно-ссылочный дуализм на примере строк в JavaScipt.
Одно из ключевых правил языка JavaScript состоит в особенностях выполнения операций над элементарными типами данных и ссылочными типами. Так, числа и логические величины являются элементарными типами данных, операции над ними выполняются по значению, они состоят из относительно небольшого и заранее определенного числа байт, поэтому операции над ними легко выполняются даже низкоуровневым интерпретатором JavaScript.
Примером ссылочных типов являются объекты. Что касается массивов и функций – они являются специализированными типами объектов, поэтому также представляют собой ссылочный тип данных. Эти типы данных характеризуются произвольным количеством свойств и элементов, поэтому операции над ними выполняются намного сложнее. В случае массивов и объектов больших размеров, операции по значению могут привести к избыточному копированию и сравнению огромных объемов памяти, что легко может поставить под сомнение оптимальность использования клиентских ресурсов.
Примером работы с элементарными типами послужит следующая пара инструкций:
var a = 5; // переменная с именем a хранит значение 5
var b = a; // производится операция копирования, исключительно по значению: переменная с именем b хранит другое значение 5 (его дубликат)
другим примером может послужить изменение значения внутренней копии переменной:
var a = a + 5; // эта строка изменяет только внутреннюю копию переменной с именем a, перезаписывая в нее значение 10
Что касается работы со ссылочными типами, простейшим примером послужит набор операций над двумя массивами:
var myArray = [10, 20, 30, 40]; // создаем переменную ссылочного типа, а именно массив с именем myArray состоящий из четырех элементов
var otherArray = myArray; // присваиваем новой переменной с именем otherArray первую перменную, при этом, копирование значений из переменной с именем myArray не производится, мы разрешаем новой переменной работать со значениями из первой.
otherArray[0] = 110; // так изменив якобы значения ново-созданной второй переменной, на самом деле мы производим операцию перезаписи значений из первой переменной.
alert(myArray); // отобразим значение 110,20,30,40
Стоит отметить, что строки, которые, на первый взгляд, могут восприняться в качестве ссылочного типа в силу неограниченности своей длины, что касается JavaScript, то строки зачастую рассматриваются с позиции элементарного типа из-за того, что не являются сущностью с природой объекта. Что же касается реальных случаев, то строки не могут вписываться в двойственный элементарно-ссылочный тип.
Строки нельзя представить объектами, поэтому можно предположить, что их можно отнести к элементарному типу, но такого рода ситуация может привести к непроизвольному расходованию системных ресурсов, в случае произведения операций по значению, в силу возможности задания произвольной длины строки. Поэтому в JavaScript нельзя изменить содержимое строки, пусть даже существует специальный метод charAt(), который после вызова вернет символ из заданной строки, но не существует метода setChartAt(), который мог бы ввести на это место другой символ. Строки в JavaScript преднамеренно созданы как неизменяемые сущности, в нем отсутствуют элементы языка, предполагающие возможность изменения символов в строке.
Несмотря на то, что невозможно определить, каким образом производится копирование строк, есть возможность определить, как производится сравнение строк – по ссылке или же по их значению.
<script>
var row1 = "hello world";
var row2 = "hello " + "world";
if (row1 == row2) {
alert("строки сравниваются по значению")
}
script>
Поскольку мы сравниваем абсолютно разные строки, состоящие из одинаковых последовательностей символов, но они интерпретируются как эквивалентные, следовательно, увидим соответствующую надпись.
Важно помнить, что сравнение строк выполняется строго посимвольно и производится для числовых значений отдельного символа из общепринятой кодировки Unicode последовательно. Кроме того, сравнение символов происходит с учетом регистра, т.е. все прописные буквы будут иметь «вес» меньший, чем соответствующие строчные буквы.
var word1 = "hello";
var word2 = "Hello";
var rez = word1 < word2;
document.write(rez); // false
Также стоит помнить, что сравнение происходит от первого определения разных символов, при этом длина строки не учитывается
var word1 = "hello w";
var word2 = "hello World";
var rez = word1 > word2;
document.write(rez); // true
Порой получая знания от пользователя в виде строк, к примеру, используя prompt, возвращается строка, введенная пользователем. В таком случае нельзя сравнивать числа, полученные от пользователя, поскольку результат будет не верен.
var a = "5";
var b = "10";
var rez = a > b;
document.write(rez); // true
Посимвольное сравнение дает результат: символ ‘5’ больше, чем ‘1’.
Стоит помнить о явном преобразовании полученных значений к числовым. Использую унарный знак плюс «+»
var a = "5";
var b = "10";
var rez = +a > +b;
document.write(rez); // false
Как видим, язык JavaScript имеет много тонкостей, о которых стоит помнить при написании своих сценариев и программ. В дальнейшем вы сможете самостоятельно обнаруживать подобные особенности и грамотно ими пользоваться.
Початок кар'єри в ІТ
Автор: Дмитро Хорошилов
Введение
В нашей стране в последнее время существует большая проблема с трудоустройством, особенно среди недавних выпускников и молодых специалистов. Именно поэтому был создан проект Labitex – специализированная IT-биржа труда, помогающая соискателям, связанным с IT-сферой, успешно найти работу.
В этой статье будут рассмотрены основные трудности и мелочи, с которыми сталкивается соискатель при поиске работы.
В чем специфика IT-биржи труда, чем она отличается от рекрутингового агентства
Задача рекрутингового агентства – находить работу. У IT-биржи труда задача другая. Она предлагает работу, но, в то же время, если соискатель не подходит работодателю по уровню знаний, биржа труда отправляет его на повышение квалификации.
Биржа труда – не только буфер между соискателем и работодателем, она предоставляет обучение в партнерских учебных центрах. Проект Labitex работает со школами, техникумами, вузами, учебными центрами и с IT-компаниями.
С чего начинается знакомство соискателя с нами
Самое простое, с чего можно начать – составление профессионального резюме. Ведь немногие знают, как оно должно выглядеть, как правильно его создать. Наш отдел HR помогает составить резюме.
При составлении резюме нужно уделять внимание как его форме, так и содержанию. Существует много способов оформления, структурирования и форматирования резюме. Стоит помнить, что неправильно оформленное и недостаточно информативное резюме служит причиной отказа в 40 % случаев. И наоборот, хорошо составленное CV может показать сильные стороны даже не очень опытного кандидата и заинтересовать работодателя. Labitex в процессе работы с IT-компаниями знает, какую информацию хочет видеть работодатель, как в резюме подчеркнуть свои сильные стороны и скрыть слабые.
Оформление социальных сетей
Проблема в том, что соискатели не до конца понимают важность своих социальных профилей, того, как они выглядят. Они не знают, что социальные сети просматриваются работодателем всегда. Специалисты Labitex консультируют, каким должен быть контент и фотографии, говорят о том, что нужно указывать опыт работы, ведь многие используют социальные сети совсем не для того, чтобы показать свои достижения. Также необходимо иметь аккаунт в сети LinkedIn. Каждый HR знает, что в этой социальной сети тоже ищут сотрудников. Профайл в LinkedIn – неотъемлемая часть при поиске работы, тем более в сфере IT.
Собеседование с HR
Шутя, в Labitex называют эту услугу велотренажером. Структура собеседования в IT-компании такая: сначала соискатель проходит собеседование с HR, это как сито, где оставляют нужных подходящих людей, а остальных отправляют домой.
Все должны понимать, что HR не может принять на работу. Функция HR –передать человека на собеседование дальше техническому специалисту, либо же отказать. Сам HR не может принимать решения о приеме на работу. Немногие представляют, что такое собеседование с HR, чего будет ждать HR, что кандидат должен говорить.
Собеседование с HR в Labitex – репетиция собеседования. Наш HR объяснит, для чего он задает определенные вопросы, как он будет пользоваться полученной информацией, на что будет обращать внимание, а на что нет. После этого соискателю намного проще, так как когда он приходит на боевое собеседование с HR, он уже четко понимает, чего от него хотят и что он будет говорить. Собеседование – не экзамен, который Вы можете либо сдать, либо нет. Это исключительно договор о партнерстве двух сторон. Не стоит бояться собеседования. Нужно понимать, чего Вы хотите от компании и что она может дать Вам.
Семинары
Мы работаем над интересностью, полезностью, функциональностью семинаров. Самый ключевой семинар, он же и самый сложный, длится около 6 часов и называется «Правильное составление резюме и как пройти первое собеседование в IT-компанию». На нем мы рассматриваем, как составить резюме, что в нем должно быть и чего не должно быть. Все участники семинара заполняют анкеты, которые потом мы трансформируем в резюме, оформленное согласно требованиям работодателя. Многие даже не понимают, как оно должно выглядеть, потому что этого никто не объясняет. Мы говорим о форме и содержании. На этом же семинаре мы также рассматриваем, как пройти собеседование с HR, что захочет услышать HR от соискателя, что соискатель должен спрашивать у HR.
Помощь персонального ассистента
Чтобы получить работу, кандидат должен многое знать и многое уметь. Labitex сотрудничает с учебными центрами, потому что для нашей компании очень важно, чтобы на выходе из учебных центров все специалисты были качественно подготовлены. Конкуренция велика, рынок IT переполнен. Поэтому специалист должен быть квалифицирован и понимать, что от него будут требовать.
Персональный ассистент работает во всех наших партнерских учебных центрах, ассистент – личный помощник, он как тренер в спортзале, который будет контролировать Ваш индивидуальный процесс обучения. Изначально персональный ассистент формирует план обучения, а также контролирует его выполнение. Он рисует timeline, может наглядно показать, для чего учиться, сколько нужно учиться и что студент получит по окончанию обучения. Персональный ассистент регулярно звонит, пишет своим клиентам.
Процентов тридцать студентов учебных центров не понимают, для чего они учатся, кем они хотят быть. Персональный ассистент создан для того, чтобы поддерживать в процессе обучения, а также контролировать качество обучения. Например, timeline может перемещаться из-за невыполнения домашних заданий. Персональный ассистент также оказывает помощь в выполнении домашних заданий. Ведь не всегда во время обучения все понятно, и нужен человек, способный объяснить сложные моменты.
Также персональный ассистент составляет план стажировки. Реальность такова, что junior-специалист должен иметь опыт работы от двух лет. Выпускник университета не может пойти на должность junior-а, потому что у него нет такого опыта. Это замкнутый круг. Labitex предоставляет необходимый опыт.
Когда персональный ассистент рисует timeline, студент понимает, что у него есть, к примеру, шесть месяцев для того, чтоб выучиться. А ассистент понимает, что у него есть шесть месяцев, чтобы найти стажировку. Средняя стажировка начинающего специалиста в сфере IT – 4-5 месяцев. Персональный ассистент приходит в компанию-партнер и договаривается о такой стажировке для своего клиента.
Если Labitex берется за обучение кандидата, из него готовят качественного перспективного сотрудника IT-компании.
Вывод
В статье было рассмотрено, что мешает соискателю получить работу в желаемой IT-компании: неправильно составленное резюме, плохо оформленные социальные сети, страх и неумение проходить собеседование с HR-специалистом, недостаток знаний, низкий уровень квалификации, отсутствие опыта работы. Также рассмотрели услуги HR-специалистов, помогающие устранить проблемы и добиться желаемой должности соискателем.