Результаты поиска по запросу: mvc4 5*
Создание секундомера с помощью 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 имеет много тонкостей, о которых стоит помнить при написании своих сценариев и программ. В дальнейшем вы сможете самостоятельно обнаруживать подобные особенности и грамотно ими пользоваться.
Начало карьеры в IT
Автор: Дмитрий Хорошилов
Введение
В нашей стране в последнее время существует большая проблема с трудоустройством, особенно среди недавних выпускников и молодых специалистов. Именно поэтому был создан проект 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-специалистов, помогающие устранить проблемы и добиться желаемой должности соискателем.
Обзор текстовых редакторов и некоторых полезных плагинов
Автор: Антон Гончаров
Введение
Привет всем. Многие студенты, которые решили связать свою жизнь с програмированием, задаются такими вопросами:
- что выбрать своим главным инструментом в работе?
- чем пользуется большинство?
- чем пользоваться при написании своего кода?
- что лучше?
На эти вопросы нет однозначного ответа, каждый редактор по-своему хорош. Но постараюсь описать главные возможности тех редакторов, с которыми я сам столкнулся и пользовался в своей практике.
Сразу внесем ясность и расставим точки над i. Средства разработки делятся на два главных класса:
1 – Интегрированные среды разработки (IDE)
2 - Текстовые редакторы (text editor)
Официальное определение интегрированная среда разработки можно найти по адресу: https://ru.wikipedia.org/wiki
Официальное определение текстовый редактор по адресу: https://ru.wikipedia.org/wiki
Попытаюсь объяснить разницу между двумя этими классами своими словами.
Интегрированная среда разработки - это как швейцарский нож или трактор, он мультифункционален, а следственно, и граничен. Может делать много, но некоторые вещи делает не так, как нам хотелось бы. Посудите сами: трактор ведь может тянуть тяжелый груз, копать и, главное, может передвигаться. Но все это он делает медленно. К примеру, если стоит задача переместиться из пункта “А” в пункт “Б” (что является одной из функций трактора), для этого лучше пригодится спорткар или обычный легковой автомобиль, для этой операции нами не нужен трактор со всеми его функциями. Следовательно, мы можем сделать вывод, что для определенных операций нам нужны определенные инструменты. В этой статье я не буду рассматривать IDE и их фичи (feature). Хочу рассказать о главных текстовых редакторах и их возможностях.
Мой TOP текстовых редакторов:
1. Sublime Text
2. Brackets
3. Visual Studio Code (на этом месте был Atom)
Пробовал, но не понравились/не подошли, по каким-либо причинам (поэтому не рассматриваю их тут)
1. Notepad++ (Сайт https://notepad-plus-plus.org/)
2. Komodo Edit (Сайт http://komodoide.com/komodo-edit/)
3. Atom (Сайт https://atom.io/)
4. Textmate (Сайт https://macromates.com)
Итак ,начнем.
Sublime Text 3
сайт: http://www.sublimetext.com/3
Чем нравится:
кроссплатформенный
легкий
большая и понятная библиотека плагинов (дополнений)
легко настроить под себя
Что следует сделать после установки.
Зайти на сайт https://packagecontrol.io/installation
И сделать все согласно инструкции, открыть консоль Саблайма: найти вкладку View и кликнуть Show Console. В появившемся снизу поле ввода вставить следующий код:
import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
Должно получиться вот так:
Жмем Enter.
Так мы установили Package Control в наш Sublime. Теперь мы можем устанавливать плагины в редактор, нажав сочетание клавиш
Ctrl+Shift+P on Windows/Linux, ⇧⌘P on OS X
На сайте https://packagecontrol.io/ вы найдете множество плагинов с детальным описанием, руководством установки и руководством использования.
Теперь о плагинах.
Плагин – грубо говоря, это дополнение программы. Официальное определение
https://ru.wikipedia.org/wiki
Плагины, которые пригодились мне в работе, возможно, пригодятся и вам.
1. Emmet - https://packagecontrol.io/packages/Emmet
Плагин, который помогает быстро набирать код. С помощью шпаргалки вы быстро научитесь быстро набирать сложные конструкции html, указав лишь название тега и порядок иерархического положения елемента на странице. Его официальный сайт http://emmet.io/ и шпаргалка http://docs.emmet.io/cheat-sheet/
Еще одно условие: для работы этого дополнения нужен предустановленный nodeJS. Найти его можно тут: https://nodejs.org/
Думаю, что nodeJS у вас уже был предустановлен, а если не был, то он вам точно еще пригодится не раз.
2. SublimeCodeIntel - https://packagecontrol.io/packages/SublimeCodeIntel
Плагин портирован из текстового редактора Komodo Editor, помогает автодополнением к языкам программирования JavaScript, Python, Ruby, XML, HTML, CSS, PHP и другим.
3. SideBarEnchancements - https://packagecontrol.io/packages/SideBarEnhancements
Плагин открывает новые возможности боковой панели для работы с Вашими проектами.
4. BracketHighlighter - https://packagecontrol.io/packages/BracketHighlighter
Плагин позволяет отображать дополнительные скобки возле номеров строк, отображая, к примеру, блоки кода.
5. AutoFileName - https://packagecontrol.io/packages/AutoFileName
Плагин говорит сам за себя, когда мы пишем пути к нашим фалам, помогает, выводя дополнительное выскакивающее окошко, с выбором папок или файлов.
6. HTML-CSS-JS Prettify https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify
Плагин “расческа”. Причесывает наш код, делает его более читабельным для человеческого глаза.
7. Color Highlighter - https://packagecontrol.io/packages/Color%20Highlighter
Плагин подсвечивает цвета при написании вайлов CSS/Less/SASS/SCSS/Stylus.
Остальные плагины, для работы с такими библиотеками как jQuery, Bootstrap, AngularJS, советую устанавливать осторожно, потому как постоянно выскакивающие окошки с помощью какого либо плагина если не пугают, то начинают очень надоедать. Поэтому советую не превращать текстовый редактор в “неубранный балкон”.
Также есть возможность установки из того-же Package Control множества тем и цветовых схем. Темы и цветовые схемы отличаются тем, что тема меняет полностью весь внешний вид Sublime, цветовая схема меняет только цвета подсветки синтаксиcа.
Файл настроек находится во вкладке Preferences>Settings Default/Settings User. Почему именно два файла? Потому что вы сможете изменять только Settings User. Оба файла являются, по сути, JSON объектами, поэтому разобраться и изменять свои настройки вы научитесь довольно быстро.
Brackets
сайт - http://brackets.io/
Этот текстовый редактор также поддерживает большинство перечисленых плагинов, и даже если таковых вы не найдете, то их аналоги точно есть в песочнице.
На правой боковой панели вы найдете несколько кнопок:
Первая в виде молнии – LivePreview. Запускает страницу с рашрирением html в вашем браузере, который установлен по умолчанию, браузер будет сам обновлять страницу.
Вторая в виде лего – Extension Manager. При клике вызывает модальное окно в, котором содержатся вкладки меню для выбора плагинов, тем, их установке и удалению.
Третья в виде “слоев торта” со стрелочкой вверх – Extract for Brackets. Ради этой кнопки и стоит устанавливать этот редактор.
Она позволяет после регистрации загрузить файлы psd формата для верстки прямо из текстового редактора, не загружая ничего больше.
Кликаете по кнопке Open PSD
Регистрируетесь или же входите под своим Adobe ID, загружаете PSD шаблон и начинаете верстать в разы быстрее.
Кликнув по какому либо элементу на шаблоне, вы можете моментально перенести: текст, css свойства, или же выгрузить картинку из шаблона пряму в папку с проектом.
С такими возможностями верстка становится в разы быстрее! Не агитирую, просто советую попробовать)
Visual Studio Code
сайт - https://code.visualstudio.com/
Бесплатный кроссплатформенный текстовый редактор, основанный на технологиях замечательного текстового редактора Atom от GitHub. Подробное описание можно прочитать по ссылке ниже:
https://uk.wikipedia.org/wiki/Visual_Studio_Code
Также будет полезна ссылка с документацией:
https://code.visualstudio.com/Docs/setup
Отличный текстовый редактор от компании Microsoft.
Облегченная и кроссплатформенная версия Visual Studio. Имеет схожий дизайн со своим старшим собратом. Похожие темы и подсказки в виде выпадающих окошек (контекстные подсказки). Так что разработчикам, перешедшим с Visual Studio, будет гораздо легче адаптироваться.
Еще несколько плюсов с коробки:
поддержка таких языков програмирования: JavaScript, C++, C#, PHP, XML, Java, Objective-C, HTML, CSS, Less, Sass и т.д. (полный перечень находится в документации).
отладчик
инструменты для работы с Git
автодополнения в стиле Emmet.
Настоятельно рекомендую обратить внимание и попробовать Visual Studio Code. Даже просто потому, что вы установите его и все, дальше просто приступаете к работе :)
На этом все. Думаю, что изложил свои мысли достаточно простым языком. Помните, что не важно, в каком текстовом редакторе или IDE вы работаете, это всего лишь инструмент, в конечном итоге вы можете остановить свой выбор на обычном блокноте и там разрабатывать приложения, для того, чтобы писать программы не обязательно иметь подсветку синтаксиса, всякие плюшки, главное, чтобы вам было удобно и при написании вы чувствовали себя комфортно.
Выбор за вами. Удачи!
CSS vs JavaScript: разрушаем мифы
Автор: Редакция ITVDN
Введение
Многие разработчики заблуждаются, считая, что CSS – единственный способ работы с анимацией в WEB. CSS становится все более и более популярным, он считается самым надежным и удобным инструментом создания анимаций. Но это не означает, что он лучше, чем JavaScript.
В этой статье мы расскажем, почему лучше использовать JavaScript, а не CSS, а также разоблачим мифы, связанные с CSS.
1. JQuery
JavaScript и JQuery ошибочно объединяют. Анимации, разработанные с JavaScript – быстрые и динамичные, тогда как анимации JQuery – медленные. Причина в том, что несмотря на его мощные инструменты, JQuery не был создан для анимации.
2. Отсутствие управления вращением и позиционированием
Для выполнения анимации необходимо использовать элементы управления вращением и определением позиции. В CSS все эти функции содержатся в свойстве «transform». Это создает проблемы для уникальной анимации чего-либо через один общий элемент. Например, анимирование «rotation» и «scale» отдельно, с разными таймингами, возможно только с JavaScript, потому что он позволяет использовать различные функции, не поддерживаемые CSS. CSS удобно использовать только для простой анимации.
3. Производительность с Velocity и GSAP
Velocity и GSAP – наиболее популярные библиотеки JavaScript. Они работают без JQuery. Нет уменьшения производительности, так как эти библиотеки работают за пределами основных анимаций JQuery.
Velocity и GSAP можно применять даже, когда jQuery не используется на странице.
* Работа без JQuery * /
Velocity(element, { opacity: 0.4 }, 900); // Velocity
TweenMax.to(element, 1, { opacity: 0.4 }); // GSAP
В приведенном выше примере Вы видете, что velocity использует тот же синтаксис, даже когда JQuery не применяется. Он просто смещает все элементы в правильном направлении, чтобы создать пространство для целевых элементов.
4. GPU-фактор
Полностью оптимизированный код с GPU отлично подходит для выполнения различных задач, включая преобразование матриц и изменение прозрачности, поэтому все ведущие браузеры сначала перенаправляют такие задачи от CPU к GPU. Нужно разделять все анимационные элементы на разные слои GPU. Таким образом мы избавимся от необходимости вычислять каждый пиксель в каждой минуте. Можно сэкономить много времени, просто перемещая один пиксель за другой.
Обратите внимание: нет необходимости делать собственный слой для каждого элемента из-за ограничения видеопамяти GPU.
5. Быстрые анимации JavaScript
JavaScript обходит CSS в производительности и скорости. JavaScript достаточно универсальный, чтобы создать впечатляющую 3D демо-анимацию, которую Вы можете увидеть через WebGL. Он достаточно быстрый, чтобы построить мультимедийный тизер, разработанный с использованием Flash, или After Effects. С JavaScript это легко сделать с помощью canvas.
Вывод
Данная статья доказывает, что анимация JavaScript более быстрая, по сравнению с анимацией CSS. Но это не означает, что CSS не стоит использовать. Он хорошо подходит для простой анимации, но если Вы хотите сделать анимацию более гибкой, Вам лучше использовать JavaScript.
Источник: http://www.script-tutorials.com/css-vs-javascript-myths-fall-to-pieces/
SEO в 2015: о чём стоит беспокоиться
Автор: Редакция ITVDN
Введение
Если Ваш бизнес достаточно рентабелен, Вы можете считать, что не нуждаетесь в SEO, так как это технически сложное и трудоемкое дело. Но если Вы отнесётесь к SEO поверхностно и небрежно, Вы можете ухудшить состояние Вашего бизнеса.
Вам нужно помнить, что в Google часто меняют правила. В этой поисковой системе был крупный ряд обновлений и, несмотря на их приятное описание, они ужасно повлияли на владельцев веб-сайтов всего мира.
Подготовка и планирование SEO-кампании может казаться Вам непреодолимым препятствием.
Почему необходимо подготовиться и узнать как можно больше о SEO, прежде чем приступить к работе?
Ваш сайт может получать 30-60 % траффика из поисковых систем, но если Вы посмотрите статистику ключевых слов в своей учётной записи (в Google Webmaster Tools), то Вы скорее всего увидите, что около 30-50 % ключевых слов, используемых для поиска Вашего сайта, это товарные знаки – названия Ваших продуктов или компаний. Такой поиск осуществляется людьми, которые уже знаю о Вас. Но не знающие Вашего бренда и ищущие то, что Вы продаёте, не могут найти Ваш ресурс.
Если пользователи хотят найти продукт или компанию по названию, Google легко направит их к цели поиска. А SEO существует для помощи пользователю найти необходимую ему услугу или товар, которые Вы можете предоставить, даже если он не знает Вашего имени.
Эта статья поможет Вам узнать, что делать для улучшения поиска.
Что такое настоящее SEO?
Настоящее SEO – это всё, что помогает поисковой системе понять содержимое Вашего веб-ресурса.
Даже если Google понял содержание и актуальность каждой страницы веб-сайта, необходимы также многократные его просмотры пользователями.
Понимание Вашего положения – Google Analytics
Прежде чем перейти к улучшению своего SEO-рейтинга, Вам нужно разобраться в своём текущем положении. Простой и быстрый способ сделать это:
1. Откройте Вашу учётную запись в Google Analytics.
2. В диапазоне дат, в правом верхнем углу, измените нынешний год на предыдущий. К примеру, 5 января 2015 станет 5 января 2014. Затем выберите Apply.
3. Потом нажмите All Sessions, выберите Organic Traffic и кликните Apply.
4. Нажмите на небольшой чёрно-белый квадратный значок в правом верхнем углу и перетащите ползунок к режиму Higher Precision (высокая точность).
5. Нажмите на кнопку интервала Week, чтобы график стал более простым для понимания.
Сейчас Ваш график будет выглядеть приблизительно так:
6. Нажмите на стрелочку справа от All Sessions и выберите команду Remove.
7. Нажмите на Select a metric, рядом с кнопкой Sessions над графиком, и выберите Pages / Session. На экране должно быть что-то подобное:
Выше мы видим, что количество трафика увеличивается с середины августа, но его качество (количество просмотренных страниц за одну сессию) снизилось.
Объединение данных
Сессия в Google Analytics показала Вам качество Вашей работы со стороны SEO и количество Ваших посетителей. Но статистика демонстрирует то, что уже работает, количество людей, находящих Ваш ресурс в поисковых системах и переходящих на него по ссылке.
Запрос данных в Google Webmaster Tools даст Вам представление о недочетах. Он покажет статистику запросов и ключевых слов, по которым пользователи не переходят на Ваш веб-сайт. Чем меньше пользователей будут переходить на Ваш ресурс, тем на более дальних позициях в поиске он окажется.
По каким ключевым словам Вы бы хотели, чтобы Вас находили?
Неправильный подбор ключевых слов – одна из самых распространенных и важных ошибок в SEO.
Многие полагают, что не нужно беспокоиться относительно своих ключевых слов. Они считают, что им известно, какие слова используются для поиска их товаров. Также они предполагают, что Google освоил содержание их сайтов. Все эти утверждения ошибочны.
Проведите коллективное обсуждение маленького ряда Ваших наиболее очевидных ключевых слов, затем проверьте их с помощью Google’s Keyword Planner. Игнорируйте информацию в Ad group ideas, опирайтесь на Keyword ideas. Вместо того, чтобы пользоваться очень неудобным интерфейсом, рекомендуем скачать данные как электронную таблицу, где можно их изменять и сортировать.
Из таблицы можно удалить все неуместные столбцы или ключевые слова.
На этом этапе Вы можете устранить проблему поиска Вашего веб-сайта пользователями. Число зафиксированных поисков определенного ключевого слова важно, но ещё важнее – уровень конкуренции.
Определяется по формуле:
(число поисков × число поисков) ÷ конкуренцию
Есть множество альтернатив формулы, но данный вариант наиболее простой.
Это слегка запутанная, но вполне эффективная методология исследования ключевых слов.
Действительно ли SEO просто?
70 % SEO – несложно. Если у Вас есть список актуальных для Вашей продукции ключевых слов, все, что нужно сделать – создать под них качественный контент. Но существует одно простое правило: созданное Вами содержание должно быть не только хорошего качества, но и совершенно оригинальным, а также он должен быть написан прежде всего для пользователя-человека, а не паука поисковой системы. Каждая статья должна быть ценной и полезной для читателя.
Но остальные 30 % требуют не просто создания хорошего содержания и ожидания посетителей. Вы должны помочь Google понять содержание на своих страницах, входящие ссылки, авторитет домена, авторитет страницы, факторы спама и многое другое.
Однако, даже если Вы не вмешиваетесь в эти 30 % SEO, создавая правильный контент для правильных посетителей, используя терминологию Ваших потенциальных клиентов, Ваш сайт будет лучше, чем ресурс Ваших конкурентов.
Вывод
SEO – очень важная часть продвижения любого бизнеса. Для того, чтобы Ваша SEO-кампания прошла успешно, нужно изучить свое текущее положение, выявить свои сильные и слабые стороны. Затем следует работать с качеством контента Вашего ресурса, делая его максимально удобным для пользователя, используя ключевые слова для улучшения поиска Вашего сайта в поисковых системах. Только на третьем этапе, после выполнения всего вышеперечисленного, стоит приступать к оптимизации понимания Вашего сайта системой Google.
Источник: http://24ways.org/2014/seo-in-2015-and-why-you-should-care/
Основы AngularJS на практике
Автор: Редакция ITVDN
Введение
AngularJS – фреймворк-библиотека Javascript, разработанная для создания одностраничных приложений на основе MVC (Model-View-Controller) шаблона.
Будем осваивать данную технологию на практике.
Создадим HTML страничку со стандартной структурой. Далее нам нужно преобразовать ее в одностраничное приложение. Для этого подключим AngularJS к своей странице, добавив в
тег с данным кодом:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
script>
Следующим шагом мы явно укажем на то, что наша страница является AngularJS приложением. Нужно добавить ng-app директиву, которой мы обозначим корневой элемент приложения. Зачастую таким элементом выступает тег или же тег . Добавим эту директиву к :
<!DOCTYPE html>
<html ng-app="">
<head>
<title>title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
script>
head>
<body>
body>
html>
Проверим, все ли работает, добавив небольшое выражение для подсчета произведения чисел 123 и 45. В AngularJs все выражения записываются в двойных скобках. Добавим в параграф со следующим содержимым:
<p>Результат произведение чисел 123 и 45 равен : {{ 123 * 45 }}p>
Запустим в браузере:
Теперь у нас есть готовый шаблон приложения, который мы будем использовать во всех последующих примерах.
AngularJS позволяет разработчику легко взаимодействовать с пользовательским вводом. Для этого есть соответствующая директива ng-model, которая связывает значения HTML элементов контроля (teaxtarea, input etc.) с приложением. Использовать эти данные поможет директива ng-bind, добавив эти данные во View (элемент MVC) и отобразив их на странице.
Применим полученные знания на практике. В созданный ранее шаблон добавим поле для ввода <input> с директивой ng-model и параграф для вывода данных c директивой ng-bind.
Код странички:
<!DOCTYPE html>
<html ng-app="">
<head>
<title>title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
script>
head>
<body>
<p>Ввведте свое имя:p>
<input type="text" ng-model="yourName">
<p>Здравствуй, <span ng-bind="yourName">span>p>
body>
html>
Откроем в браузере:
Теперь попробуйте ввести свое имя в поле для ввода.
Давайте добавим в данный пример дефолтное значение имени, к примеру Анна. Сделаем это, конечно же, с помощью директивы ng-init, которая позволяет инициализировать любую переменную AngularJS приложения.
В строку добавим директиву ng-init.
<input type="text" ng-model="yourName" ng-init="yourName='Aнна'">
Посмотрим изменения в браузере:
Теперь мы имеем значение по дефолту – Анна, но все так же можем изменять его:
Вывод данных в этом примере можно сделать еще одним способом, а именно, использовав выражение. Заменим на {{yourName}}.
<p>Здравствуй, {{ yourName }}p>
Открыв страницу, мы не увидим абсолютно никаких изменений, а все потому, что выражения в AngularJS связывают данные со страничкой точно так же, как и ng-bind директива.
Как упоминалось в статье ранее, AngularJS строит приложения на основе MVC. Часть модель – представление (Model - View) определяется с помощью директивы ng-app. Контроллер в свою очередь определяется директивой ng-controller.
Рассмотрим пример с использованием контроллера страницы.
Создадим страничку со списком гостей, которых Вы пригласите на свой день рождения.
К созданному ранее шаблону добавим контроллер, а так же установим имя для приложения. В тег внесем следующие изменения:
<html ng-app="firstApp" ng-controller="firstController">
Далее добавим с типом text для введения имени гостя и еще один с типом submit для добавления гостя в список. Также добавим
с полем для вывода списка и чекбоксом с типом checkbox для того, чтобы можно было удалять тех, кто не придет на ваш праздник. В данный
добавим директиву ng-repeat, отвечающую за повторение данных в обозначенном контейнере.
<!DOCTYPE html>
<html>
<head>
<title>title>
<meta type="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">script>
head>
<body ng-app="firsApp" ng-controller="firstController">
<h2>Мои гости:h2>
<form ng-submit="addGuest()">
<input type="text" ng-model="guestsInput" size="50" placeholder="Введите имя гостя">
<input type="submit" value="Добавить гостя">
form>
br>
<div ng-repeat="guest in listOfGests">
<input type="checkbox" ng-model="guest.come"> <span ng-bind="guest.guestName">span>
div>
<p><button ng-click="remove()">Удалить гостя button>p>
body>
html>
Осталось добавить скрипт, который будет содержать функции для работы с элементами нашего приложения. Замечу, что все функции будут расположены в контроллере приложения.
Скопируйте и добавьте после закрывающегося тега параграфа с кнопкой
<p><button ng-click="remove()">Удалить гостя button>p>
следующий код:
<script>
var app = angular.module('firsApp', []);
app.controller('firstController', function($scope) {
$scope.listOfGests = [{guestName:'Я любимый', come:false}];
var countOfGuests = 1;
$scope.addGuest = function() {
$scope.listOfGests.push({guestName:$scope.guestsInput, come:false});
$scope.guestsInput = "";
countOfGuests++;
checkNumberOfGuests();
};
$scope.remove = function() {
var oldGuests = $scope.listOfGests;
$scope.listOfGests = [];
angular.forEach(oldGuests, function(guest) {
if (!guest.come) $scope.listOfGests.push(guest);
countOfGuests--;
});
checkNumberOfGuests()
};
function checkNumberOfGuests(){
if(countOfGuests <= 2){
alert("Маленькая вечеринка тоже не плохо! Не печалься! Лучших друзей не бывает много!");
}else if(countOfGuests >= 9){
alert("Праздник?! ВЕЧЕРИНИЩЕ!");
}else{
alert("Узкий круг самых близких, это всегда хорошо!");
}
} script>
В данном коде у нас есть три функции: добавление и удаление гостя и проверка количества гостей.
В функции добавления мы берем введенные данные guestsInput и добавляем их в лист listOfGests. Устанавливаем значение чекбокса в false (в нашем случае, это значит, что человек придет / если значение true, то есть галочка стоит - значит не придет), после чего очищаем поле ввода. Далее увеличиваем счетчик гостей и вызываем функцию проверки их количества.
В функции удаления мы берем список гостей listOfGests и проверяем значение чекбокса каждого гостя, определяя, кто придет, а кто нет. Удаляем тех, кто отмечен галочкой (не пойдет) и уменьшаем счетчик элементов.
Функция проверки количества гостей очень проста, поэтому подробнее мы ее разбирать не будем.
Давайте откроем пример в браузере и поработаем с ним:
Добавим несколько гостей:
С изменением количества гостей содержимое оповещений будет меняться.
Когда вы добавите больше 9 друзей, тогда увидите такое оповещение:
Поздравляем, вот Вы и создали свое первое одностраничное приложение с помощью AngularJS!
Соглашение при разработке AngularJS приложения
Автор: Антон Гончаров
Введение
Давайте рассмотрим практику написания AngularJS приложения. Приведенные ниже примеры помогут вам писать приложение правильно, чисто и более обдуманно. С помощью применения данной практики вы разработаете приложение, которое будет разделено на блоки, что в конечном итоге поможет строить правильную архитектуру приложения.
Итак, начнем.
1) Создавая новое приложение, старайтесь разделять модуль, контроллер, фабрику, вынося их в отдельные файлы. Этот прием имеет ряд приимуществ:
улучшается читаемость приложения
улучшается рефакторинг приложения
легче производить дебаггинг приложения
//плохая практика
angular
.module('app', ['ngRoute'])
.controller('myController', myController)
.factory('myFactory', myFactory);
function myController() { };
function myFactory() { };
//рекомендуется
//myapp.module.js – файл модуля
angular
.module('app', ['ngRoute']);
//mycontroller.js – файл контроллера
angular
.module('app')
.controller('myController', myController);
function myController() { };
//myfactory.js – файл фабрики
angular
.module('app')
.factory('myFactory', myFactory);
function myFactory() { };
2) Старайтесь оборачивать код в самовызывающиеся функции.
Это позволяет :
сохранить переменные от глобального объекта scope
предотвратить перетирание глобальных переменных (т.к. они локальны)
при минификации кода помогает избежать путаницы переменных
//плохая практика
angular
.module('app')
.factory('myfactory', myfactory);
function myfactory() { };
//рекомендуется
(function () {
'use strict';
angular
.module('app')
.factory('myfactory', myfactory);
function myfactory() { };
})();
3) Старайтесь придерживаться иерархии именования. Это поможет правильно структурировать приложение, что в итоге приведет к правильной архитектуре программы.
Избегайте создания модуля через переменную и используйте цепочный синтаксис (в виде цепочки)
//плохая практика
var app = angular.module('app', [
'ngAnimate',
'ngCookies',
'firebase'
]);
//рекомендуется
angular
.module('app', [
'ngAnimate',
'ngCookies',
'firebase'
]);
4) Используйте именованные функции. Код становится более читабельным и куда лучше тестируется.
//плохая практика
angular
.module('app')
.controller('mycontroller', function () { });
//рекомендуется (обратите внимание на контроллер он вынесен в отдельный файл
//от модуля)
//myapp.module.js – файл модуля
angular
.module('app', ['ngRoute']);
//mycontroller.js – файл контроллера
angular
.module('app')
.controller('myController', myController);
function myController() { };
5) Используйте controller as нотацию вместо просто controller. Она более читабельна, помогает не запутаться в коде
//плохая практика
<div ng-controller=”myController”>{{title}}div>
//используем
<div ng-controller=”myController as mycontroller”>{{mycontroller.name}}div>
6) Используйте слово vm(ViewModel) внутри контроллера вместо ключевого слова this. Это поможет избежать подмены контекста внутри функции.
//антипаттерн
function mycontroller () {
this.name = {};
this.deleteSome = function () {};
};
//паттерн
function mycontroller () {
var vm = this;
vm.name = {};
vm.deleteSome = function () {};
};
Это лишь базовые приемы, которые вы можете использовать в своей практике. Они помогут вам избежать некоторых проблем в вашей роботе и сделать код вашего приложения чище и понятнее. Желаю вам хорошего кода и светлых идей.