Программирование для начинающих
Настройка песочницы для практики программирования
Использование cPanel, файлового менеджера и FTP
Вчера я понял, что мне не очень нравится кодирование CSS. После просмотра HTML он был повторяющимся. Это казалось еще одним способом делать то же самое, что я научился делать в HTML. Это также казалось очень сложным, когда я углубился в это.
Так как это все обзор, в любом случае, я понял, что могу пролистать оставшуюся часть книги. Я наблюдал, как работает код и как он отображается. Гайки и болты того, как все работает, можно будет посмотреть в другой день - если мне это вообще нужно. В своем исследовании я узнал о Bootstrap. Это способ стандартизации CSS. Я могу научиться писать этот код, если мне действительно нужно немного CSS.
Теперь я перейду к следующей книге, JavaScript и JQuery, Джона Дакетта (без аффилированности).
Я сделал песочницу на своем веб-сервере, чтобы практиковать HTML, CSS, а теперь и программирование.
Я начинающий программист. Вы можете быть начинающим программистом. Возможно, вы не знаете, что такое песочница и как ее создать.
Песочница - это место на веб-сервере для загрузки кода и игры с ним. Это местоположение не связано с вашим реальным веб-сайтом, поэтому вы можете писать неработающий код без опасности испортить основной сайт. В идеале это будет доменное имя, чтобы вы могли практиковаться «вживую».
Эти инструкции предполагают, что вы платите за веб-сайт и что у вас есть веб-хост, на котором работает cPanel. Большинство сайтов есть.
Вы можете настроить локальную песочницу на своем персональном компьютере, но я действительно не знаю, как это сделать.
Иди лови рыбу, если это так.
Как настроить песочницу на вашем веб-сервере
Большинство размещенных веб-сайтов поставляются с панелью управления для управления серверной частью. Здесь вы устанавливаете программы (например, блоги), управляете адресами электронной почты и проверяете статистику.
Обычно эта панель управления использует программное обеспечение cPanel. Разные версии выглядят немного по-разному.
Если вы не знаете, как попасть в панель управления, просмотрите документацию, полученную от вашего веб-хостинга при первой регистрации.
Я размещаю свой личный веб-сайт в компании A2 (не партнерская ссылка).
Шаг первый: перейдите в свою cPanel
Инструкции для вашего сайта могут отличаться. Проверьте свою документацию или обратитесь к своему веб-хостеру. На моих последних двух веб-хостах адрес cPanel был http://yourWebSite.com/cpanel. Затем вы вводите свое имя пользователя и пароль, чтобы попасть внутрь.
Оказавшись внутри, вы увидите набор значков, которые представляют различные части вашей панели управления. Опять же, существует много разных версий, поэтому не беспокойтесь, если мой снимок экрана (выше) будет выглядеть иначе.
Шаг 2. Откройте диспетчер файлов и создайте песочницу.
Значки могут быть разными, но ищите имя «Диспетчер файлов». Открой это.
На вашем экране должно отображаться много файлов и папок. Он должен быть очень похож на мой скриншот выше. Дважды щелкните значок «public_html». Здесь находятся все файлы вашего веб-сайта (также известные как «корень документа»).
Шаг 3. Создайте новую папку под названием «песочница».
Щелкните значок «+ Папка». Появится окно с запросом имени. Введите название «песочница» и нажмите кнопку «создать новую папку».
Успех (вроде!)
Теперь у вас пустая песочница. Ваше новое пространство настроено по веб-адресу:
Http://yourWebSite.com/sandbox
Если вы перейдете на эту страницу, вы можете найти пустой список файлов или получить сообщение об ошибке с вашего сервера (запрещено!). Не волнуйся. Это просто означает, что вам не на что смотреть в папке.
Шаг четвертый: создайте пустой файл, который будет вашей веб-страницей
Вернувшись в диспетчер файлов, дважды щелкните новую папку «песочницы», чтобы открыть ее. Конечно, он будет пустым. Нажмите кнопку «+ Файл» вверху. В новом окне создайте файл «index.html». Когда открывается веб-адрес, вы смотрите либо на страницу index.html, либо на index.htm (или, если вы программист, это может быть index.SomethingElse).
Наконец, откройте этот пустой файл, чтобы вы могли его отредактировать и попрактиковаться.
Шаг 5. Отредактируйте новый «веб-файл»
Щелкните новый файл правой кнопкой мыши (Windows) или щелкните, удерживая нажатой клавишу Ctrl (Mac), и выберите «Изменить». Теперь у вас будет окно, в котором вы можете ввести компьютерный код.
Откройте фактический веб-адрес в новом окне (или новой вкладке). Помните, что адрес этого нового места:
Http://yourWebSite.com/sandbox
Вы можете включить или отключить часть /index.html. Веб-сервер предполагает, что вы имеете в виду именно это.
Каждый раз, когда вы пишете код, который хотите протестировать, помещайте его в файл index.html, сохраняйте и затем обновляйте в окне браузера.
Попробуйте! Добавьте фиктивный код, чтобы протестировать новую песочницу:
<html> <head> <title>My Sandbox!</title></head> <body> <h1>My first headline!</h1> <p>I’ve even got some body copy. Radical!</p> </body> </html>
Шаг 6. Настройте FTP для передачи папок.
Это отлично подходит для работы с файлами по одному. Вы можете легко создавать отдельные файлы или папки. Вскоре вы обнаружите, что диспетчер файлов будет только работать с отдельными файлами или папками. Как только вы начнете программировать, вы будете работать с несколькими файлами и сложными структурами папок.
Для этой работы нам понадобится FTP. Это протокол передачи файлов для тех из вас, кто не знает. Здесь это не имеет большого значения. Мы могли бы назвать это Вещью, которая ставит Вещь на Вещь (TTT).
Откройте главное окно cPanel. Значки будут выглядеть иначе, но вы найдете раздел «Учетные записи FTP».
Используйте эту область для создания учетной записи FTP. Это будет комбинация имени и пароля, например адрес электронной почты.
После того, как вы создали учетную запись, она может сообщить вам «Настройки FTP» для подключения. Мои были доступны в разделе «Настроить FTP-клиент». Это будет комбинация:
Шаг седьмой: Загрузите и запустите FileZilla
Я использую Windows, поэтому бесплатная программа, которую вы используете, может быть другой. Я использую FileZilla (не аффилированный). После того, как вы загрузите его и откроете, вы можете ввести указанные выше данные сервера и подключиться к нему. У меня есть опция Быстрое подключение.
Все мои локальные файлы (на моем компьютере) отображаются в левом окне. Все файлы удаленного сервера (на вашем веб-хосте) находятся в правом окне. В левом окне перейдите к файлу / папке, которую вы хотите загрузить. Перейдите в нужное место перехода в правом окне. Дважды щелкните файл / папку в левом окне, чтобы переместить их на удаленный сервер. Это также работает в обратном порядке, если вы хотите загрузить файл / папку со своего сервера.
Шаг восьмой: Взломайте пиво, готово!
Сожалеем, что шагов так много, но вам нужно настроить их только один раз. Теперь, когда он настроен, я могу открыть две вкладки в своем веб-браузере. Один показывает страницу редактирования моего кода. Другой показывает мою получившуюся веб-страницу.
Если мне нужно переместить папку, я могу сделать это через FTP.
Когда я начал работать с CSS, мне нужно было открыть три вкладки. Одна вкладка для моего текста index.html, одна для моего текста CSS и вывода на веб-страницу. Когда я начну программировать, их может быть даже больше, но мы добьемся цели, когда доберемся до цели.
Как у вас дела? Готовы ли вы присоединиться к нам? Завтра начинаем изучать JavaScript!
Bunny Trail: Защитите свою песочницу паролем
Мы здесь экспериментируем. Наш код может быть сломан и небезопасен. Мы должны защитить паролем нашу песочницу от скрытых глаз (например, поисковых систем и хакеров).
Здесь нет инструкций, но я нашел отличное онлайн-руководство, которое проведет вас через весь процесс. Вы видите парадные ворота моей песочницы (спрашивают пароль).
Мэтт стремится к достижению следующего уровня веб-разработчика. Да начнется битва! Подпишитесь на информационный бюллетень M.W. McCabe.
Первоначально опубликовано на https://mwmccabe.com 11 апреля 2020 г.
