Введите текст для поиска

среда, 29 марта 2017 г.

Быстрая настройка Sublime text 3 для верстки сайтов

У кого канал толстый - видео 
Кто любит читать текст:

  1. Заходим в Сублайм текст 3. 
  2. Нажимаем Ctrl+Shift+P. 
  3. В вышедшем окошке набираем "Install" и выбираем в списке ниже "Package Control: Install Package"
  4.  После установки опять повторяем пункт 3, в появившемся окошке набираем "Emmet", выбираем в списке ниже и устанавливаем. Emmet - это плагин для быстрого набора html и css кода. Этот плагин позволяет пользоваться сокращениями, которые позже развертываются в полноценный код. Инструкцию по пользованию легко сможете найти в интернете. 
  5.  Далее, если вам понятен принцип установки плагинов, я не буду писать, что нужно повторять пункт 3 и в появившемся окне набирать названия плагинов. 
  6. AutoFileName - плагин позволяет быстро прописывать пути до файлов. Когда вы начинаете набирать путь до файла, в всплывающем окне появляются названия папок и файлов, которые можно найти по этому адресу. Например, есть папка img, в которой находится папки header, content, footer. В свою очередь в папке  header находятся изображения  logo.jpg, background.jpg. При наборе адреса /img во всплывающем окне будут появляться папки header, content, footer. Далее при наборе /img/header - будут появляться названия файлов  logo.jpg, background.jpg
  7. Gist - плагин позволяет хранить куски кода на github и получать к ним доступ, не выходя из sublime text. 
  8. Sass - плагин позволяет ускорить разработку css кода. Сам не пробовал, поэтому пока прокомментировать ничего не могу. 
  9. One Dark Material Theme и One Dark Color Scheme - оформление тема. 
  10. Buffers Scroll - ссылка . Этот плагин нельзя установить напрямую из Sublime text. По ссылке нажимаем зеленую кнопку справа "Clone or Download", ниже выбираем вариант "Download ZIP". Скачиваем архив и распаковываем. Затем в Sublime text в верхнем меню выбираем пункты "Preferences"  -> "Browse Packages". Откроется окно проводника. В папку, которая открылась (Sublime text/Packages) перемещаем распакованную папку Buffers Scroll. Собственно больше ничего делать не нужно. 
  11. Плагины установлены, теперь займемся настройкой. 
  12. По ссылке скопируем в тексте слева пункт "Settings". Копировать нужно сам текст настроек, включая открывающую и закрывающую скобки. Затем в Sublime text в верхнем меню выбираем "Preferences" - > "Settings". Откроется новое окно, в правой части окна выбираем все нажатием клавиш Ctrl + A. Затем вставляем скопированный текст настроек нажатием клавиш Ctrl + V. Затем сохраняем настройки нажатием клавиш Ctrl + S. Все оформление Sublime text после сохранения настроек должно измениться. Для чего предназначена каждая настройка - можно прочитать, найдя соответствующие значения в левом окне. 
  13. Осталась еще одна настройка. По ссылке в пункте 12 копируем текст из пункта keymap: windows users. Далее в Sublime text необходимо выбрать пункты меню "Preferences" -> "Key Bindings" и вставить скопированный текст в окошко справа. Не забудьте удалить квадратные скобки, если они задвоились. Должна быть одна открывающая [ и одна закрывающая ] скобки. Затем нажимаем Ctrl + S, чтобы сохранить настройки. Эта настройка позволяет выравнивать строки кода. Для этого выбираем выравниваемые строки и нажимаем сочетание клавиш Alt + Shift + F.    
  14. Для быстрой настройки Sublime text необходимо в верхнем меню выбрать пункты "Preferences" - > "Browse Packages", и скопировать содержимое открывшейся папки Sublime text/Packages. Впоследствии, вам останется всего лишь заменить содержимое аналогичной папки на свежеустановленной версии Sublime text на вашу резервную копию. 
На этом все, всем удачи и поменьше IE 6)). 


Если вам понравилась/принесла пользу эта запись, то сказать "СПАСИБО" очень просто - поделитесь записью в социальных сетях при помощи кнопочек ниже. Вам несложно, а мне приятно!

пятница, 16 декабря 2016 г.

Изучаем JS - задания для начинающих на JS с ответами

Привет, друзья!
Поскольку надо прокачивать скил по js поискал учебные задания для новичков по javascript.
Нашел на одном англоязычном ресурсе - Задания по javascript. Кстати, если интересно, там есть задания не только по js, но и по jQuery, php, phyton, mySQL, C, C#, Java и тд. В общем практически по всем самым распространённым языкам программирования и некоторым фреймворкам.
В этой записи выложу перевод этих заданий.
Каждую запись в последствии сделаю ссылкой на её решение.

Задания по Javascript (сложность - основы)

  1. Вывести на экран текущую дату и время в указанном формате:
    Сегодня: Пятница
    Текущее время: 4PM:50:22 (pm - время от 0 часов до 12 часов дня, am - время соответственно с 12 часов дня до 24 часов)
  2. Написать программу для печати содержимого текущего окна. 
  3. Напишите программу для получения текущей даты:
    Формат вывода даты:
    м-д-год, м/д/год или д-м-год, д/м/год
  4. Напишите программу вычисления площади треугольника по трем сторонам, которые равны 5, 6 и 7. (Возможное усложнение - длину сторон получать от пользователя - мои примечания). 
  5. Напишите программу, которая периодически вращает надпись "w3resourse" в правом направлении, удаляя по одной букве с конца и добавляя по одной букве с начала. 
  6. Напишите программу, которая определяет, является ли год високосным или нет. 
  7. Напишите программу, которая находит в какие года между 2014 и 2050 воскресенье приходится на 1 января. 
  8. Напишите программу, которая загадывает случайное число в интервале от 1 до 10. После этого программа должна принимать ваш ответ, какое число загадано. Если пользователь угадал это число, программа должна отобразить "Хорошая работа!", если не угадал - "Не попал))". 
  9. Напишите программу, которая рассчитывает количество дней, которое осталось до следующего рождества (Возможные усложнения - можно сделать текстовое поле для ввода текущей даты и выпадающий список, в котором можно выбрать до какого праздника вы хотели бы посчитать дни).  
  10. Напишите программу для умножения и деления двух чисел, принимаемых через текстовые поля. Интерфейс программы ниже:
  11. Напишите программу для перевода температуры из/в градусов Цельсия и Фаренгейта. Формула для расчёта - c/5 = (f-32)/9 (где - c: градусы Цельсия, f: градусы Фаренгейта
  12. Напишите программу, которая показывает текущий адрес страницы. 

Если вам понравилась/принесла пользу эта запись, то сказать "СПАСИБО" очень просто - поделитесь записью в социальных сетях при помощи кнопочек ниже. Вам несложно, а мне приятно!

понедельник, 12 декабря 2016 г.

Изучаем JS - события, атрибуты

Привет, друзья!
В этот раз мне захотелось сделать так, чтобы у меня была кнопочка <button>, по клику на которой у нас бы:
1. Менялся весь цвет текста на странице
2. Менялся весь цвет фона на странице
3. Менялась надпись на кнопочке. Т.е. если у нас на странице - ночной режим, - > на кнопочке отображаем "Сделать день", в обратном случае на кнопочке - > "Включить ночь".
4. Вместе с заменой текста на кнопочке - надо, чтобы менялся и бекграунд и цвет надписи на кнопочке. Будет это всё выглядеть примерно так день - :
это день
А здесь - ночь
это ночь
Для реализации задуманного будем использовать следующее:

  • Стили текста будем оформлять с помощью соответствующих классов: для body class = 'day/night', для кнопки - class = 'btnDay/btnNight'. Можно было бы прописывать все свойства css вручную, но это же тупо, согласитесь)). Проще прописать класс css, и его динамически присвоить при помощи js. Также, если вам надо будет изменить позже оформление, то как и положено - вы идёте в css и меняете оформление, а не копаете js. 
  • getElementById () - чтобы взять конкретный элемент (в нашем случае это будет кнопочка)
  • getAttribute('class') - этим методом получим текущий класс элемента body
  • innerHTML - свойство элемента, меняем текст внутри кнопки
  • setAttribute('class', 'day') - устанавливаем новый атрибут class который равен в данном случае 'day'. 
  • И самое интересное - addEventListener() - метод элемента, прочитайте о нем отдельно, поскольку я так понял, это самый правильный метод назначения реакции на события (клик мышью, клик правой кнопкой, нажатие на клавиатуре и тд)
Все эти методы  и тд легко гуглятся. Если интересно, набирайте в методах - то, что написано до скобок, например для getElementById ()  - в поисковике - 'js getelementbyid',  для свойств соответственно просто  - для innerHTML - в поисковике - js innerhtml.
Итак, html


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тестовая JS страница</title>
        <style>
            .day {
                color:#393337;
                background-color: white;
            }
            
            .night {
                color:#d9dbda;
                background-color: #252525;
            }

            .btnDay {
                color:#393337;
                background-color: white;
            }

            .btnNight {
                color:#d9dbda;
                background-color: #252525;
            }
            

            .wrap{
                background-image: none;
                z-index: 5;
            }


            .center-align{
                width:800px;
                margin:0 auto;
                text-align: justify;
                text-align: center;
                
            }
            p {
                text-align: justify;
                text-indent: 5%;
                font-size: 18px;
                margin-left: 25px;
                margin-right: 20px;
                
            }
        </style>
 </head>
 <body>
    
    <div class="wrap">
        <div class="center-align">
        
                <button id= 'changeColor' class = 'btnNight'>Включить ночь</button>
                <h1>Привет, тебе случайный посетитель!</h1>
                <p>Товарищи! постоянный количественный рост и сфера нашей активности требуют определения и уточнения систем массового участия. Разнообразный и богатый опыт начало повседневной работы по формированию позиции влечет за собой процесс внедрения и модернизации направлений прогрессивного развития. Идейные соображения высшего порядка, а также укрепление и развитие структуры влечет за собой процесс внедрения и модернизации позиций, занимаемых участниками в отношении поставленных задач. Повседневная практика показывает, что постоянный количественный рост и сфера нашей активности обеспечивает широкому кругу (специалистов) участие в формировании позиций, занимаемых участниками в отношении поставленных задач. Равным образом постоянный количественный рост и сфера нашей активности позволяет выполнять важные задания по разработке новых предложений. Задача организации, в особенности же новая модель организационной деятельности способствует подготовки и реализации направлений прогрессивного развития.</p>

<p>Повседневная практика показывает, что постоянный количественный рост и сфера нашей активности в значительной степени обуславливает создание систем массового участия. Задача организации, в особенности же реализация намеченных плановых заданий позволяет оценить значение существенных финансовых и административных условий. Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности влечет за собой процесс внедрения и модернизации существенных финансовых и административных условий. Таким образом рамки и место обучения кадров позволяет оценить значение направлений прогрессивного развития.</p>

<p>Задача организации, в особенности же реализация намеченных плановых заданий играет важную роль в формировании новых предложений. Таким образом дальнейшее развитие различных форм деятельности играет важную роль в формировании систем массового участия. Равным образом сложившаяся структура организации влечет за собой процесс внедрения и модернизации новых предложений. Таким образом начало повседневной работы по формированию позиции в значительной степени обуславливает создание форм развития. С другой стороны начало повседневной работы по формированию позиции позволяет оценить значение системы обучения кадров, соответствует насущным потребностям.</p>
        </div>  
    </div>
    
    <script src="test1.js"></script>
    </body>
</html>
и сам test1.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/* 
* Суперфункция для изменения изменения класса body страницы
* и изменения надписи на кнопочке. 
*/


;'use strict';

var el, btn, elHasClass, bdClass;
el = document.body;  /*присваиваем класс day или night всему body, 
                            чтобы изменить фон и текст страницы*/
btn = document.getElementById('changeColor'); /* Дергаем кнопочку, чтобы менять текст на ней*/

 btn.addEventListener('click', function (event) {
    elHasClass = el.getAttribute('class'); // узнаем значение class у body


    bdClass = isDayOrNight (elHasClass); /* передаем предыдущий параметр, 
                                            чтобы перевести его в число*/
          switch (bdClass){
                case 0:
                case 1: // если класс пустой (по умолчанию) или день - day
                    el.setAttribute('class', 'night');
                    btn.innerHTML = 'Сделать день';
                    btn.setAttribute ('class', 'btnDay');
                    break;
                case 2: // если ночь - night
                    el.setAttribute('class', 'day');
                    btn.innerHTML = 'Включить ночь';
                    btn.setAttribute ('class', 'btnNight');
                    break;
                } 
                        }
                                               );


function isDayOrNight (status){
    if (status=== null){ // если у нас нет класса у body
        return 0;
        }
    else if (status=== 'day'){ // если у body класс равен day
        return 1;
    }
    else if (status=== 'night'){ // если у body класс равен night
        return 2;
    }
    else { // это просто защита от ошибок))
        return 'error';
    }
}
Предвосхищая вопросы - подсветка кода осуществлена с помощью сервиса hilite.me. Эта цветовая схема  - называется 'fruity'. Мне понравилось, чем-то sublime напоминает. 

Если вам понравилась/принесла пользу эта запись, то сказать "СПАСИБО" очень просто - поделитесь записью в социальных сетях при помощи кнопочек ниже. Вам несложно, а мне приятно!

воскресенье, 11 декабря 2016 г.

Изучаем JS - блок, меняющий цвет на рандомный

Идея такова - есть коробочка div с прописанным id. Мы обращаемся к ней. По клику по этому div мы генерируем три значения rgb для трех цветов (число от 0 до 255). Потом склеиваем эти три значения в строку вида: rbg(000, 000, 000) и передаём ее в  style.backgroundColor элемента.
Конечно, есть вероятность того, что новый цвет и текущий совпадет. Однако, она ничтожно мала (я так думаю 1 / (256*256*256). Собственно, html: 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тестовая JS страница</title>
        <style>
            #box {
                width:300px;
                height:300px;
                background-color:lightsalmon;
            }
        </style>
 </head>
 <body>
    <div id="box">Кликни, чтобы изменить цвет</div>
    <script src="test1.js"></script>
    </body>
</html>
И javascript.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 
* Суперфункция для изменения цвета коробочки в рандомный.
* принимает параметр:
* box - id коробки
* to - количество ргб оттенка, до которого надо рандомить
*/

var el, curRGB, box, to, red, green, blue;
box = 'box';
to = 255;

el = document.getElementById(box);

el.addEventListener('click', function(event) {
             
            red = myRandom(to) + ',';
            green = myRandom(to) + ',';
            blue = myRandom(to);
            curRGB = 'rgb(' + red + green + blue + ')';
            el.style.backgroundColor = curRGB; 
            
        });
        function myRandom (to)  { // рандомайзер
      return Math.floor(Math.random() * to);
        }
Жалко, что здесь нельзя вставлять исполняемые скрипты на страницу.

Если вам понравилась/принесла пользу эта запись, то сказать "СПАСИБО" очень просто - поделитесь записью в социальных сетях при помощи кнопочек ниже. Вам несложно, а мне приятно!

суббота, 10 декабря 2016 г.

Изучаем JS - переход на другую страницу

Привет, друзья!
У глобального объекта window есть свойство location, у которого в свою очередь есть свойство href. href указывает на текущий адрес страницы. И позволяет задавать его. Подробнее прочитать - здесь. Напишем простой код для того, чтобы при нажатии на кнопочку - нас перекидывало на другой сайт.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
        <script>
           /* 
           * Функция получает целевой адрес страницы url 
           * на которую перекидывает пользователя. 
           */
           function changeURL(url){
           window.location.href = url;
           }
        </script>
      
 </head>
 <body>
  
    <button onclick="changeURL('http://google.ru')">Перейти в гугл</button>
    <button onclick="changeURL('http://yandex.ru')">Перейти в Яндекс</button>
    <button onclick="changeURL('http://pikabu.ru')">Перейти в Пикабу</button>

 </body>
</html>

Если вам понравилась/принесла пользу эта запись, то сказать "СПАСИБО" очень просто - поделитесь записью в социальных сетях при помощи кнопочек ниже. Вам несложно, а мне приятно!

пятница, 9 декабря 2016 г.

Изучаем JS - таблица умножения

Напишем простую таблицу умножения, которую будет выводить скрипт.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script>
            var i = 1, j = 1, sum, text = "<table><tr>",
            text01 = "</tr><tr>", text02 = "<td>", 
            text03 = "</td>", text04 = "</td></tr></table>";
            
            document.write(text);
            
            
            while (i <= 9) {
                document.write(text02);
                
                
                while (j <= 9) {
                    j++;
                    sum = i * j;
                    document.write(i + "*" + j + "=" + sum + "<br/>");
                }
                document.write(text03);
                
                if (i === 3 || i === 6) {
                    document.write(text01);
                }
                i++;
                j = 1;
            }
            document.write(text04);
        </script>
И напишем CSS чтобы немного разукрасить всё это безобразие
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
 <style>
            table, td {
                border: 1px solid #5ea26b;
            }

            td {
                margin: 10px 15px;
                padding: 5px 10px;
            }
        </style>
Должен получиться такой результат

Если вам понравилась/принесла пользу эта запись, то сказать "СПАСИБО" очень просто - поделитесь записью в социальных сетях при помощи кнопочек ниже. Вам несложно, а мне приятно!

вторник, 6 декабря 2016 г.

Хорошая капча, не пробиваемая автоматизированными капчараспознавателями

Вот задумался о хороших капчах, которые нелегко распознаются автоматизированными средствами, при этом хорошо распознаются обычными пользователями. Запомните одно, если вашу капчу распознают вручную (т.е. образцы ваших реальных пользователей), то они вашу капчу должны распознавать хорошо. Иначе, ваши пользователи тоже будут отступать перед вашей капчей.
На ум пришло пару решений:


  1. Даётся картинка капча. В качестве неё выступает у нас первая строка картинок. Далее идёт подсказка. Это вторая и третья строки.
    А потом идёт текстовое поле <input> для ввода ответа.


  2. Второй вариант, в принципе понятно из картинки:
Надо понять только одно - надо максимально усложнить автоматическое распознавание и упростить  ручной ввод.
Если не понятно, ручной ввод - это ввод данных реальным пользователем. Усложняешь ввод для него - отталкиваешь пользователей от своего сайта.

Если вам понравилась/принесла пользу эта запись, то сказать "СПАСИБО" очень просто - поделитесь записью в социальных сетях при помощи кнопочек ниже. Вам несложно, а мне приятно!