Архив рубрики: Я стану Webmaster

Чтобы стать Webmaster-ом, нужно много знать и уметь, и очень пригодится для РП которые будут специализироваться на интернет технологиях.

Обучение JS и разработка игры Самолётик. Шаг 2.

В подготовительной части  мы подгружали 2 JS файла:

<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/step1.js"/></script>

Если про 1 я упоминал — это сам 3D фреймфорк, то файл «step1.js», то то что нам предстоит создать.

Преступим.

Из чего должна состоять игра самолётик? Вполне логично предположить что из самого самолетика, поля над котором он должен лететь, облаков для антуража, топливо ( в последующем мы его заменим на буквы) для полета, которое нужно собирать ну и препятствий, которые нужно облетать.

Нам нужно создать соответствующие объекты. three.js содержит «по умолчанию» ряд стандартных графических объектов, такие как шар, куб, цилиндр, пирамида и тд. — подробнее можно глянуть в описании ФВ.

Итак с объектами разобрались — но игра это не только объекты, это и «камера» от лица который мы видим «сцену» , так же это освещение и управление объектами. Для удобства создания и обновления всех объектов создадим «основной» модуль-функцию, пусть называется  «init»:

window.addEventListener('load', init, false);

function init() {
	// тут создаем сцену - камеру
	createScene();

	// тут добавляем свет, а то темно будет
	createLights();

	// тут появляются чать наших объектов, 
        // еще не все что нужно, но уже что-то
        // Сам самолетик / поверхность для полета будет море / облака
	createPlane();
	createSea();
	createSky();

	// здесь в зависимости от "контроллов",
        // мы будем менять положение наших объектов 
	// а так же генерировать изменения ландшавта
	loop();
}

 

Давайте начнем с самого простого и понятного — наших 3D объектов :

Самолетик:

 

Обучение JS и разработка игры Самолётик. Шаг 1.

В прошлой статье я разбирал подготовку необходимых знаний для нашего тестового проекта, то сейчас сделаем подготовку файлов нужных для начала процесса разработки.

Итак ШАГ 1.

Создаем папку «Самолетик», я это сделал на рабочем столе.

В этой папке создаем файл index.html

Делаем в нем следующий код:

<!DOCTYPE html>
<html lang="en" class="no-js">
 <head>
 <meta charset="UTF-8" />
 <title>Самолетик: Часть 1 </title>
 <link rel="stylesheet" type="text/css" href="css/styles.css" />
 <script type="text/javascript" src="js/three.js"></script>
 <script type="text/javascript" src="js/step1.js"/></script>
 </head>
 <body>
 <div class="world" id="world"></div>
 </body>
</html>

Потом внутри делаем еще 2 папки «css» и «js», и

Идем на сайт http://threejs.org/build/three.min.js и скачиваем последнюю версию самого фреймворка или скачиваем ее ОТ МЕНЯ  (версия скачана 12.07.2016), чтобы точно работало, и кидаем ее в папку «js» (имя должно быть three.js)

В папке «css» создаем файл  styles.css, со след наполнением (ОН ЖЕ,только с заготовкой для 2 части):

.world {
 position: absolute;
 width: 100%;
 height: 100%;
 overflow: hidden;
 background: -webkit-linear-gradient(#e4e0ba, #f7d9aa);
 background: linear-gradient(#e4e0ba, #f7d9aa);
}

Это наш «мир» а именно, фон.

Итак подготовка сделана. Осталось творить — ШАГ 2.

Статья для habrahabr

Решил попробовать стать полноценным жителем habrahabr.ru. Для получения заветного «ключа» нужно представить относительно полезную/интересную статью или ее перевод, или обзор по технологии — в общем что-то связанное с IT и не слишком «замыленное» на Habre.

Так как сейчас начал изучать JavaScript  в виду его активного роста, простоты изучения и увеличения возможностей за счет различный фреймворков, для создания web приложений — ориентир на SPA ( SPA в WiKi )

Кстати для начала разработки SPA сайтов и приложений кроме JS нужно еще знание HTML / HTML5 , CSS, AJAX.

После изучения базовых основ, а для этого мне очень помогла статьи на Habre, направляя на пусть истинный:

Как стать профессиональным веб-разработчиком: практическое руководство

А для «набивания руки» в JS использовал игру codecombat.com , которая вплоне дает понимания как основ программирования , так и использования JS в принципе. PS.  в CodeCombat можно выбрать не только JavaScript, но и например Phyton, для изучения — вперед дерзайте!

PS. Так же у каждого разработчика должна быть под рукой статься с Более 350 бесплатных инструментов для разработчиков так же на Habre.

По совету той же статься после основ, стал искать различные фреймворки и проекты с открытым исходным кодом. И ткак как мне всегда нравились игры нашел статью по созданию игры The Aviator — летающий самолетик который уклоняется от камней и собирает «топливо», в которой есть не только исходники, но и «пошаговое описание» как эту игру сделать:

Делаем игру «Самолетик» используя Three.js

Раз пример будет использовать Three.js, то соответственно наш путь идет на  http://threejs.org/ — где имеется полное описание для данного FW с примерами. Туду нужно заглянуть тем кто заинтересуется как работают «потрошки».

В рамках обучения лучше не просто повторить, то что уже кто-то сделал, а попробовать немного изменить и посмотреть что получиться. Сразу же возникло желание немного её упростить и переделать на «ловить» буквы и составлять из них слова — само собой расчет на аудиторию в 4-6 лет.

Ну как говориться если хочешь чему то научиться, попытайся обучить этому другого)…

Итак ШАГ 1.

 

 

 

Шаг 2 : Сообщаем миру что появился новый сайт!

Наш сайт появился, он еще мал и гол, и о нем никто не знает. Начнем решать эти проблемы.

Немного теории, браузерный поисковый рынок фактически поделен поделен между Google и Yandex, совместно они дают где то 90% всех поисковых запросов, на них и будем ориентироваться. Для успешного продвижения сайтов и Гугл и Яндекс предоставляют набор инструментов для webmaster -ов. Ими нужно будет научится пользоваться, мне лично больше нравятся инструменты Google поэтому пример просмотра метрики буду показывать на них. Инструкция как и в Шаге 1 будет простой  и поэтапной:

  1. Идем на Google и регистрируем аккаунт, если еще нет.
  2. После регистрируемся в сервисаx AdSense и Analytics.
  3. Заходим в Analytics на вкладку Администратор, в появившемся аккаунте нажимаем на выпадающее меню и «Создать аккаунт» и заполняем все поля. После регистрации нам должны выдать идентификатор отслеживания. Запоминаем его.
  4. Теперь переходим на вкладке Администратор, переходим в подменю «Ресурс» и дальше в «Код отслеживания». Сохраняем его , он нам понадобится дальше.
  5. Сейчас если есть регистрация в AdSense они с Analytics связываются автоматически, в противном случае полученный ранее идентификатор отслеживания нужно добавить на «Главная страница» -> «Настройка Аккаунта», там же заодно нужно добавить сайт в разрешенные для показа рекламы, а в Analytics на вкладке Администратор в подменю «Аккаунт» -> «Установление связи в AdSense» нажать «Связать аккаунты».
  6. Заходим на Yandex и регистрируем аккаунт , если еще нет.
  7. После регистрации на главной странице нажимаем на название аккаунта и в выпадающем меню нажимаем Вебмастер. Далее Ищем кнопку «Мои сайты» и рядом с ней должна быть «Добавить сайт». Проходим процедуру добавления и проверки сайта.
  8. Отлично, теперь идем в Админку нашего сайта.
  9. Переходим в подменю «Внешний вид» -> «Редактор», и там открываем «Подвал» и добавляем сохраненный ранее текст скрипта от Google перед оператором </body>. Обновляем файл (сохраняем изменения). далее открываем «Заголовок» и добавляем скрипт перед оператором </head>. Сохраняемся. Готово теперь Google будет следить за нами.
  10. Устанавливаем плагины Google XML Sitemaps и WordPress SEO и активируем их. Теперь у нас в параметрах появилась меню XML-sitemap. Пока в настройках можно ничего особо не трогать, позже разберемся. Нажимаем создать наш новый Sitemap.
  11. При регистрации хостинга нам приходила информация по подключению к нему, воспользуемся ее и в управлении файлов мы должны увидеть в папке WWW 3 новых файла robots.txt (именно так, в нижнем регистре — менять имя НЕЛЬЗЯ) , Sitemap.xml и Sitemap.xml.gz.
  12. Заходим в robots.txt и меняем его текст на тот что ниже (ВНИМАНИЕ! обязательно поменяйте название сайта!) и на этом можно закончить 2 шаг и ожидать индексации сайта роботами поисковых систем, а просматривать статистики можно в  Analytics :

User-agent: Yandex
Disallow: /cgi-bin
Disallow: /wp-admin
Disallow: /wp-includes
Disallow: /wp-content/plugins
Disallow: /wp-content/cache
Disallow: /wp-content/themes
Disallow: /wp-trackback
Disallow: /wp-feed
Disallow: /wp-comments
Disallow: */trackback
Disallow: */feed
Disallow: */comments
Host: IMYA_MOEGO_SATITA.ru

User-agent: *
Disallow: /cgi-bin
Disallow: /wp-admin
Disallow: /wp-includes
Disallow: /wp-content/plugins
Disallow: /wp-content/cache
Disallow: /wp-content/themes
Disallow: /wp-trackback
Disallow: /wp-feed
Disallow: /wp-comments
Disallow: */trackback
Disallow: */feed
Disallow: */comments

Sitemap: http://IMYA_MOEGO_SATITA.ru/sitemap.xml.gz
Sitemap: http://IMYA_MOEGO_SATITA.ru/sitemap.xml

 

Шаг 1 : Как создать сайт или как создался этот сайт за 30 мин…

Многие кто не знают как создать свой сайт, с чего нужно начать…  Но на самом деле все гораздо проще чем многие думают)…

Расскажу на примере этого сайта и хостинг провайдера hostline.ru на котором этот сайт расположен…

Сайт построен на самой популярной платформе worldpress, особенно часто ее используют для личных блогов или новостных сайтов. Скачать последнюю версию можно с официального сайта абсолютно бесплатно, то есть даром,  т.к. это свободно распространяемое ПО с открытым исходным кодом  — http://ru.wordpress.org/ или просто кликнув по СКАЧАТЬ  и получим последнюю русскую версию .

Итак наши действия по шагам :

  1. Идем на сайт http://hostline.ru и регистрируемся
  2. Выбираем свободный домен на главной странице (если купить у http://hostline.ru хостинг на год, то дадут купон на бесплатную регистрацию в зоне .RU и .РФ)
  3. Переходим на страницу заказа хостинга, и покупаем на год (чтобы была скидка в 20% и дали бесплатный купон на регистрацию), желательно указать выбранный домен (чтобы потом не потребовалось привязывать в ручную). Для покупки соответственно в личном кабинете нужно проплатить услугу.
  4. Теперь идем на главную страницу и заказываем понравившейся домен и оплачиваем купонам через личный кабинет. Ожидаем подтверждения.
  5. Заходим в личный кабинет и на вкладке Хостинг должно быть 2 записи, 1 — проплаченный хостинг и 1 — бесплатный хостинг который дали к домену при покупке. Удаляем бесплатный.
  6. После регистрации хостинга на почту придет информация о личном кабинете созданного хостинга — заходим туда и проверяем что во вкладке домены есть наш, если нет то добавляем, далее выбираем в меню управление файлами. Там в папке WWW должна появится папка с названием домена, удаляем все из нее, и вставляем скаченную версию worldpress.
  7. Заходим на наш новый сайт по вашей зарегистрированному доменному имени через браузер и видим там приветственное сообщение от Wordlpress, проходим простые шаги установки и все — добро пожаловать в ваш сайт и его админку.
  8. Через админку выбираем понравившейся нам шаблон из огромного множества. Пишем первую статью-новость и начинаем потихоньку разбираться с функционалом. Начало положено!

ФуууУФ — УРА мы такие молодцы создали свой сайт, следующая статья о сайтах будет как его теперь продвигать в поисковых системах.