Создание ресурсов в Интернете и обучение

ahead · 22-11-2017 17:33:36

Не забываем сохранять копии папок-сайтов локального сервера. Можно использовать внешние диски HDD (SSHD), как Влад, а можно использовать и флеш-накопители большой ёмкости. Беда с потерей данных обычно приходит неожиданно, порой теряются данные за
несколько лет - наработки, макеты проектов, уроки, стандартные куски кодов и т.д..
Поэтому просто организуйте на внешнем носителе иерархию архива с папками и копируйте туда все важные данные!

Продолжая тему BootStrap - так должна выглядеть базовая структура -

bootstrap/
  +-- css/
  ¦   +-- bootstrap.css
  ¦   +-- bootstrap.min.css
  +-- js/
  ¦   +-- bootstrap.js
  ¦   +-- bootstrap.min.js
  +-- img/
  ¦   +-- glyphicons-halflings.png
  ¦   +-- glyphicons-halflings-white.png
  L-- README.md

JS - это не что иное, как плагины JavaScript, будем изучать чуть позже. Обратите внимание, что все плагины JavaScript требуют jQuery.

ahead · 23-11-2017 07:47:00

Ещё раз по поступающим вопросам (подключение BootStrap) -

<!DOCTYPE html>
<html lang="ru">
<head>
    <!-- Кодировка веб-страницы -->
    <meta charset="utf-8">
    <!-- Настройка viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Подключаем Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" >
</head>
<body>
      
    <!-- Подключаем jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Подключаем Bootstrap JS -->    
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

Файлы JavaScript лучше подключать перед закрывающим тегом body (</body>), так как это обеспечит более быструю загрузку и отображение основного контента веб-страницы.
До встречи завтра.

ahead · 24-11-2017 08:47:00

Уважаемые курсанты,
не секрет, что многие, кто учится создавать сайты, форумы, интернет-магазины, соц. сети и т.д., планируют потом зарабатывать именно на этом. И они прекрасно понимают открывающиеся перспективы и в плане заработка, и в плане удобства работы. Хочу рассказать об этом более подробно.
Начнём с удобства работы. Я являюсь противником офисной работы, когда речь идёт о сайтостроении вообще и о вёрстке в частности,
так как эта деятельность легко может выполняться удалённо. Рекомендую и Вам зарабатывать на вёрстке и сайтостроении удалённо.
Это позволит Вам жить там, где Вы хотите, а не там, где работа рядом. Позволит Вам жить в любой стране, а не там, где Вас взяли на работу. Работать - в любое удобное для Вас время и дни, брать отпуск в любое подходящее время и на любой срок. Таким образом, удобств очень много.
Теперь по поводу заработков, например верстальщика. Вёрстка одной средней страницы стоит в районе 4-5 тысяч рублей, необходимое же время при наличии опыта - 3-4 часа. Таким образом, за час работы верстальщик получает в районе 1000 рублей, и это не выходя из дома.
Со временем, при нарастании числа отзывов, портфолио и главное довольной клиентской базы - по сути, Вашего "золотого актива", заказов будет столько много, что Вы будете отказываться от простых и не дорогих.
Таким образом, чем дольше работаете, тем больше у Вас постоянных клиентов (часто посредников). И конечно-же, через некоторое время можно смело повысить цены. Поверьте - заказчиков очень много и каждый месяц их всё больше! Дело в том, что даже крупные раскрученные WEB-студии, фирмы и ИП в сфере IT (и зарубежные в том числе), пользуются услугами свободных разработчиков.
Уже сейчас Вам надо подумать о создании простого HTML сайта с предложениями на вёрстку (для начала и практики), примерно такого, как мой -
http://larexlab.ru/

До встречи в офисе!

ahead · 25-11-2017 16:25:21

Рекомендую на домашних компах PC поставить LAMP сервер, получить у провайдера статический адрес (это стоит 50-150 р в месяц),
и сконфигурировать сервер и роутер. Тогда у вас будет возможность заходить на свой дом. комп извне, из интернета с любой точки.
Получится своеобразный домашний хостинг, очень удобно для показа проектов заказчикам, внесению изменений , редактирования и т.д.
Для этой цели можно использовать старый ноут например, с малым потреблением энергии. На занятии продемонстрирую как всё работает на примере своего домашнего сервера.

ahead · 26-11-2017 11:14:43

Как мы уже говорили, сетка Bootstrap по-умолчанию состоит из 12 ячеек, имеющих одинаковую ширину и в зависимости от разрешения экрана ширина ячеек может меняться. Вы можете воспользоваться адаптацией ячеек под ширину экрана.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/dopstyle.css" rel="stylesheet" media="screen">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container border-container">
        <h1>Hello, world!</h1>
        <div class="row">
          <div class="col-md-3 col-sm-6">
                <h3>This is Photoshop's version</h3>
                This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh
          </div>
          <div class="col-md-3 col-sm-6">
                <h3>This is Photoshop's version</h3>
                This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh
          </div>
          <div class="col-md-3 col-sm-6">
                <h3>This is Photoshop's version</h3>
                This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh
          </div>
          <div class="col-md-3 col-sm-6">
                <h3>This is Photoshop's version</h3>
                This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh
          </div>
        </div>
    </div>
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Запустите из примера в доп. материалах файл index.html и начинайте изменять размер окна браузера. Вы увидите три состояния которые прописаны в шаблоне.

В примере используется следующая конструкция -

<div class="container border-container">
        <h1>Hello, world!</h1>
        <div class="row">
          <div class="col-md-3 col-sm-6">
                <h3>This is Photoshop's version</h3>
                This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh
          </div>
        </div>
        ....
</div>

Здесь первый блок container -> далее идет строка row -> и ячейка с материалом. Для ячейки с материалом прописаны два класса col-md-3 и col-sm-6

col-sm -это класс для маленьких устройств.

col-md предназначена для устройств с шириною 970px и выше.
col-md имеет следующую структуру -
col-md-[дальше идет цифра, которая обозначает количество занимаемых ячеек всего их по умолчанию 12] я задал 3 поэтому изначально шаблон поделен на 4 столбца.
Если задать 4-м div-ам значение col-md-6, то мы получим страницу в два столбца. Соотношение ячеек должно давать в сумме — 12. Попробуйте задать значение 8:4. Тогда в результате получите первую ячейку по ширине превышающую вторую в два раза.
Успехов, до встречи в офисе!

ahead · 26-11-2017 11:51:13

Не забываем заглядывать на отличный блог (с форумом) по Линуксам моего коллеги, живущего давно в Испании, Владимира Долгирева -

http://compizomania.blogspot.com/

Вы получите много полезной информации и будете в курсе выхода новых дистрибутивов ОС Линукс.

ahead · 28-11-2017 07:31:55

По программе FTP-менеджера FileZilla - несколько подсказок.
В настройках указать бинарную передачу файлов, шифрование - TLS-явный, максимальное кол-во подключений - 1.

Рад успехам всех курсантов, так держать! Настала пора зарегистрировать домены, приобрести хостинг, и закинуть туда ваши проекты, чем и займемся на следующем занятии. Также изучим панель управления хостингом - CPanel.
До встречи.

ahead · 28-11-2017 12:30:45

Для редактирования файлов CSS, среди прочих, рекомендую редактор Geany. Его и доп. плагины можно загрузить в систему из "Менеджера программ" (установщик новых программ). Он подсвечивает синтаксис, это очень удобно. Также полезно иметь под рукой (на раб.столе) справочник по CSS (классы, селекторы, идентификаторы, функции, и т.д.) Можно пользоваться и ресурсами в сети, например -

http://basicweb.ru/css/css_ref.php

nikita · 28-11-2017 14:56:58

Валерий здравствуйте!
Хочу учиться на Ваших курсах, подскажите, когда начало следующих? Знаю одного из Ваших выпускников (Максим, Калининград), он и рекомендовал. Стационарный компьютер дома имеется, ноутбук с Линукс-Минт есть, систему знаю, услоавия тоже. Готов на пару месяцев приехать в Ваш город.
С уважением Никита Ревитин

Отредактировано nikita (28-11-2017 15:00:10)

ahead · 28-11-2017 16:59:04

Приветствую Никита!
Да, получил резюме, посмотрел. Не вижу преград для Вашего выбора-решения. Новые курсы начнутся с Нового Года, в первых числах.
Трое кандидатов уже есть, будете четвертым. На сайте Школа+ сообщу точную дату. У Вас родня-друзья в Казани есть или снимать комнату будете? Курс полный будете проходить или сокращенный?

DX-радиосвязь на 11-метрах коротких волн - увлеченным!

Объявление

#51 22-11-2017 17:33:36

Re: Создание ресурсов в Интернете и обучение

#52 23-11-2017 07:47:00

Re: Создание ресурсов в Интернете и обучение

#53 24-11-2017 08:47:00

Re: Создание ресурсов в Интернете и обучение

#54 25-11-2017 16:25:21

Re: Создание ресурсов в Интернете и обучение

#55 26-11-2017 11:14:43

Re: Создание ресурсов в Интернете и обучение

#56 26-11-2017 11:51:13

Re: Создание ресурсов в Интернете и обучение

#57 28-11-2017 07:31:55

Re: Создание ресурсов в Интернете и обучение

#58 28-11-2017 12:30:45

Re: Создание ресурсов в Интернете и обучение

#59 28-11-2017 14:56:58

Re: Создание ресурсов в Интернете и обучение

#60 28-11-2017 16:59:04

Re: Создание ресурсов в Интернете и обучение

Подвал форума