Monday, June 24, 2019

Установить HTTPS для сайта

В Википедии написано, что HTTPS - это расширение протокола HTTP для поддержки шифрования в целях повышения безопасности. Данные в протоколе HTTPS передаются поверх криптографических протоколов SSL или TLS.

Установка HTTPS - это не тривиальная задача, несмотря на то, что в 2019 все стало намного проще и дешевле. В данном посте будет рассказано об установке HTTPS с помощью Cloudflare.


Зачем нужен HTTPS?


Без SSL сертификата сайт часто не отображается в Safari на телефонах iPhone:



Также без HTTPS бессовестные операторы связи (такие как Мегафон) имеют возможность встроить свою рекламу на сайте!




Добавить домен на сайт Cloudflare


Подразумевается что у вас уже есть аккаунт на сайте https://www.cloudflare.com/
Необходимо добавить свой сайт. Интерфейс Cloudflare довольно удобен.



Затем необходимо для своего домена сменить name-сервера


Изменить name-сервера


name-сервер или DNS сервер или ns-сервер - это сервер доменных имен. Первым делом необходимо изменить адреса. Интерфейс Cloudflare подсказывает что надо сделать:



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



Теперь необходимо подождать пока изменения вступят в силу.
Через некоторое на почту приходит уведомление о смене name-сервера:




Создание SSL сертификата


На вкладке "Crypto" необходимо сгенерировать SSL сертификат. Если все сделано правильно, во всплывающем окне появятся сертификаты:



Теперь сертификаты можно и нужно сохранить в файлы origincert и privatekey соответственно.


Установка сертификата на сервер


Теперь необходимо эти сертификаты установить на сервер. Тут для каждого сервера все индивидуально, в моем случае необходимо писать в техническую поддержку:



И ждем, когда установят и еще некоторое непродолжительное время, когда действия SSL сертификата вступит в силу.


Еще пару настроек Cloudflare


Установить:



И еще:



И еще:



Это самое простое и минимальные действия.
Теперь ссылка начинается с «https»


Не пугайтесь


Если вы открываете сайт и видите такой экран:



Это означает, что сертификат на сайт еще не установлен.


Подключить поддомен


Например, у меня есть сайт gsgusev.ru и второй сайт на поддомене info.gsgusev.ru. Для работы поддомена достаточно на сайте Cloudflare добавить DNS запись "info".




Итого


Сертификат установлен на мой сайт: https://vadimcpp.ru/


Дополнительно на сайте https://www.ssllabs.com/ssltest/  можно проверить надежность сертификата. Пример проверки для моего сайта:



Список сайтов, для которых подключен SSL:



Sunday, June 9, 2019

Техническое задание на изменение сайта gsgusev.ru

«Пришедшая в голову идея еще не материальна. Записанная идея уже начала реализовываться.»

Техническое задание


Текущий сайт создан на технологии Vue (смотреть исходники здесь). 

Необходимо создать страницу, которая будет содержать красивый рассказ о поселке. Рассказ будет реализован в файле index.html.
Функционал исходного сайта «gsgusev.ru» необходимо перенести на поддомен «info.gsgusev.ru»

Главная страница - index.html


Инновационный кластер технополис GS располагается в двух километрах от города Гусев Калининградской области.

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

Продукты, созданные сотрудниками кластера, широко известны в России и за её пределами.



Сотрудники GS Labs (центра исследований и разработок программных продуктов и потребительской электроники) активно сотрудничают с калининградским IT-сообществом и проводят митапы в БФУ им. И. Канта.



Для поддержания физической формы и активного образа жизни инициативные сотрудники коттеджного посёлка создали «клуб 111» - клуб триатлона.



Члены клуба являются сотрудниками Технополис GS и регулярно принимают участие в международных соревнованиях по триатлону. Каждый год в августе на территории посёлка проходит открытый ежегодный чемпионат по триатлону. Больше подробностей можно узнаться на официальном сайте клуба: 111club.ru

(Ссылка на сайт клуба 111) 111club.ru

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



За годы жизни мы собрали всю полезную информацию в одном месте. Телефон администратора поселка, расписание автобусов, карта с номерами домов и другая важная информация размещены другой странице этого сайта.

(Ссылка на сайт info.gsgusev.ru) info.gsgusev.ru

Наши двери открыты для специалистов и их семей. Близость моря, свежий воздух и Европа под рукой. Если вы задумываетесь о своём будущем, рассмотрите список наших открытых вакансий.

Скоро здесь появится список актуальных вакансий

Результат

После реализации приведен фрагмент сайат:



Дальше планируется развитие и улучшение сайта.

Сайт может отличаться от того, что заявлено.
Поэтому актуальную версию можно всегда посмотреть прямо на сайте: gsgusev.ru

Tuesday, June 4, 2019

Разработка персонального сайта

Создать персональный сайт - это нелегкая задача. Обычно задание на разработку сайта ставит заказчик. В данном случае необходимо поставить задачу самому себе. Итак...


Техническое задание


Сделать самый простой сайт, который будет отвечать на главный вопрос «Кто я?».
Кроме того сайт будет отображать текущие навыки и умения, а также рассказывать о предоставляемых услугах.

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


Главная страница - index.html


Аватар

Vadim Cpp

Место жительства: Калининград, России

Деятельность: программирование сайтов и мобильная разработка, веду блог

Работаю в компании Роскомпьютинг

Веду проекты
Тут пока пусто, но скоро появится список проектов.

Контакты: github, linkedin, вк, фб, твиттер, инстаграм, tg, email


Результат


На мобильных устройствах сайт выглядит так:



За дизайн спасибо телеграм чату «UI, UX & Web дизайн»

Sunday, June 2, 2019

Техническое задание на изменение сайта ТЦ «Две пятерки»


«Пришедшая в голову идея еще не материальна. Записанная идея уже начала реализовываться.»

Техническое задание

Текущий сайт создан на технологии ReactJS (смотреть исходники здесь). Поисковые системы пока плохо «понимают» такие сложные сайты. Поэтому исходный сайт «gorkogo55.ru» необходимо перенести на поддомен «shop.gorkogo55.ru».

На основном домене «gorkogo55.ru» необходимо разместить простой сайт из нескольких html страниц.

Исходный код нового сайта назвать gorkogo55-landing и опубликовать в открытый доступ на Github

Главная страница - index.html


В шапке необходимо отобразить логотип:




Добро пожаловать на сайт торгового центра «Две пятерки»

Адрес: Калининград, улица Горького, 55
График работы: с 09:00 до 19:00

Вы - посетитель?

Просмотреть акции магазинов, информация о магазинах, как добраться до торгового центра - раздел «Посетителям»

Вы - арендатор?

Просмотреть помещения, доступные для сдачи в аренду, информацию об управляющей компании, разместить объявление об акциях и распродажах - раздел «Арендаторам»

Вы - собственник?

Просмотреть информацию об управляющей компании, разместить объявление об акциях и распродажах - раздел «Собственникам»

Контакты

По вопросам сотрудничества пишите во
ВКонтакте или Телеграм

Страница «Посетителям» - visitors.html


Разместить информацию:
  • Информация о магазинах (это уже реализовано на сайте)
  • Просмотр акций от разных магазинов
  • Как добраться до торгового центра

Страница «Арендаторам» - tenants.html


Разместить информацию:
  • Помещения, доступные для сдачи в аренду
  • Информация об управляющей компании
  • Возможность разместить объявление об акциях и распродажах

Страница «Собственникам» - owners.html


Разместить информацию:
  • Информация об управляющей компании
  • Возможность разместить объявление о сдаче помещения

Зачем это все?

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

Результат

После выполнения сайт выглядит так.

Главная страница:


Страница «Посетителям»:


Страница «Арендаторам»:

Страница «Собственникам»:



Планы


Дальше нам предстоит собрать отзывы у посетителей, арендаторов и собственников и обновить разделы сайта в соответствии с пожеланиями.