Разработка адаптивных сайтов (Санкт-Петербург)

Я занимаюсь разработкой адаптивных сайтов в Санкт-Петербурге с помощью HTML5, CSS3, Bootstrap, JavaScript, Apache, NGINX, PHP, MySQL и SQLite.

Что такое адаптивный сайт?

Адаптивный сайт — это сайт, который меняет свою структуру при изменении ширины области просмотра. Таким сайтом будет удобно пользоваться как на компьютере, так и на ноутбуке, планшете или смартфоне. Google очень любит индексировать адаптивные сайты, ведь пользователей смартфонов становится все больше с каждым днем. Сайт, на котором вы сейчас находитесь, является адаптивным. Попробуйте изменить ширину окна браузера с помощью мыши или зайдите на сайт с мобильного устройства.

Ваш новый адаптивный сайт начнет работать!

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

Этап 1: создание скелетона адаптивного сайта

  • скелетон сайта — это скелет вашего сайта, полностью описывающий его структуру. Этот скелет со временем мы обернем мышцами (добавим новые разделы) и обтянем кожей (сделаем уникальный дизайн), при этом мы не будем менять структуру скелета. Ну и, наконец, заплывем жирком =);
  • создание скелетона сайта подразумевает создание всех необходимых настроек и файлов как для пользователей, так и для поисковых машин;
  • изначально добавляем в скелетон сайта не более 5 страниц + favicon.ico (иконка сайта), 404.html (показывается, если страница не найдена), robots.txt (руководство для поисковых машин), .htaccess (настройки сервера) и sitemap.xml (карта сайта для роботов). Это могут быть как чисто HTML-страницы, так и PHP-страницы в зависимости от функционала скелетона. При необходимости в дальнейшем расширяем хоть до миллиона и более страниц;
  • скелетон страниц изначально имеет полностью адаптивную структуру;
  • если вы думаете, что скелетон страницы малофункционален, то вы ошибаетесь. В своем составе он содержит библиотеку Bootstrap версии 4.5. Зайдите на сайт Bootstrap, чтобы увидеть все доступные возможности скелетона: адаптивная сетка, карточки, всплывающие подсказки, диалоговые окна, карусель, пагинация и многое другое. Кроме того, в составе скелетона библиотека jQuery 3.5. Посмотрите сколько уже готовых плагинов для jQuery доступно "из коробки". Скелетон многофункционален и вполне возможно вы просто не захотите с него слезать;
  • кодировка всех файлов исключительно UTF-8;
  • список поддерживаемых браузеров соответствует списку браузеров, поддерживаемых Bootstrap 4.5 и jQuery 3.5. Сразу говорю, браузер Internet Explorer я не поддерживаю;
  • скелетон страниц будет обернут моей программой генерации HTML-страниц на основе документов OpenOffice Writer. Для обновления страниц скелетона вам не нужно иметь сотрудника, владеющего HTML и CSS. Достаточно посадить молодую девушку, владеющую программой OpenOffice Writer или Microsoft Word. Программа сгенерирует все файлы автоматически;
  • срок создания скелетона 3 рабочих дня. Это не срок, через который я только начну, а срок когда мы закончим первый этап сотрудничества;
  • стоимость создания скелетона 10 тысяч рублей.

Этап 2: расширение функционала адаптивного сайта

  • постепенно добавляем различный функционал;
  • стоимость работ из расчета 150 тысяч рублей в месяц (8-ми часовой рабочий день 5 дней в неделю). Покупка лицензий на графические изображения или их создание с нуля оплачивается отдельно. Важно понимать, что я программист, а не художник. При этом Photoshop знаю на отлично, имею собственный графический и видео редактор, люблю фотографировать, снимаю видео, таймлапсы и гиперлапсы, но вот рисовать не умею;
  • если работа не требует целого рабочего дня, то оплата по часам из расчета 1500 руб. в час;
  • суббота, воскресенье и официальные праздничные дни — выходные дни. При необходимости работы в выходные дни оплата двойная;
  • работаю только по предоплате. Если оплаты нет, то останавливаю работу на любой стадии и передаю вам результат. Сайт без доработки может не работать;
  • работаю только удаленно. На моем компьютере создана вся необходимая инфраструктура и документация. Я не ищу клавиши на клавиатуре, печатаю со скоростью мысли. Гуглю только в крайних случаях, в остальных пользуюсь своими книгами. Форумами также не пользуюсь;
  • при необходимости могу появляться в вашем офисе, но вы оплачиваете рабочий день, а также проезд и проживание в гостинице (если офис не в Санкт-Петербурге);
  • работаю в основном по ночам. Во-первых, ночью тихо, никто не стучит, не сверлит, свет не отключают. Во-вторых, обновлять сайты днем не очень удобно из-за большого числа посетителей. Ночью просто посетителей меньше и обновлять сайт проще.

Какие технологии я использую при создании адаптивного сайта?

Использую следующие технологии и связки для веб-программирования:

  • операционная система семейства UNIX;
  • HTML5, свой генератор HTML-страниц на основе документов OpenOffice Writer + VSCode;
  • CSS3 + VSCode;
  • CSS-препроцессор Sass (SCSS-файлы) + VSCode;
  • JavaScript (ECMAScript 6, ES-2015) + jQuery 3.5 + VSCode;
  • Node.js 12.18.3 (x64) + Electron 12.0.5 + VSCode;
  • все программы под Node.js 12.18.3, которые можно установить с помощью npm;
  • Bootstrap 4.5 и 5.0 (адаптивный дизайн Web-страницы) + VSCode;
  • Web-серверы Apache и NGINX + XAMPP или Денвер;
  • PHP 5 и 7;
  • Базы данных MySQL и SQLite;
  • Управление базами данных MySQL с помощью phpMyAdmin;
  • Photoshop, Lightroom, Gimp, ImageMagick, OpenCV (работа с графикой);
  • VirtualDub, FFmpeg, Audacity (работа с видео и аудио).

Создаю программы, выполняющиеся как на стороне клиента, так и на стороне сервера

Возможны следующие способы генерации страниц адаптивного сайта:

  • чистый HTML 5 с CSS 3 (сайт-визитка, документация к чему-либо, например, к программе; работает везде, сервер не обязателен);
  • генерация на стороне клиента с помощью JavaScript (способ очень плохо сочетается с поисковой оптимизацией, поэтому я не использую React.js, Vue.js и Angular для всего сайта, но его можно использовать для отдельного раздела сайта);
  • генерация на стороне сервера с помощью PHP;
  • генерация на стороне клиента с помощью JavaScript и на стороне сервера с помощью PHP (связка через AJAX или обычную перезагрузку страницы; наиболее часто используемый универсальный способ; можно создать что угодно: личный кабинет, форум, интернет-магазин, соцсеть и т.д.);
  • генерация на стороне разработчика с помощью моей программы (генерация HTML-страниц на основе документов OpenOffice Writer или Microsoft Word). Вам не нужно знать HTML и CSS, чтобы обновлять такой сайт. Достаточно знать OpenOffice Writer. На основе документа odt и его стилизации программа ODT2HTML автоматически сгенерирует все страницы. Останется только загрузить их на хостинг по протоколу FTP. Не знаете, что это такое и как пользоваться? Научу! Сгенерированные статические HTML-страницы отлично индексируются поисковыми системами и великолепно кэшируются браузерами и сервером, что снижает нагрузку на сервер. Если страница есть в кэше браузера, то она не загружается с сервера повторно, а берется из этого кэша и очень быстро отображается.

Выполняю ли я поисковую оптимизацию адаптивного сайта?

Обязательно! Я сразу выполняю поисковую оптимизацию адаптивного сайта. Это позволит без больших вложений в рекламу привлечь максимальное число посетителей за счет выдачи сайта в результатах поисковых систем (Яндекс и Google) на первых страницах или даже первых строчках. С помощью моей программы на Python автоматически сгенерирую файл sitemap.xml. Добавлю систему статистики Яндекс.Метрика, чтобы вы могли в режиме реального времени наблюдать за посещаемостью сайта и знали какие разделы и страницы пользуются популярностью. Добавлю сайт в панель веб-мастера на Яндексе и в Google, чтобы поисковые машины сразу узнавали об изменении страниц и сообщали вам о замеченных ошибках, вирусах и др. проблемах, возникающих при сканировании сайта.

Готовые сайты на основе скелетона

Эти типы сайтов можно создать очень быстро, т.к. основа уже готова:

  • каталог сайтов (пример https://812i.ru/web/);
  • доска объявлений (пример https://812i.ru/board/);
  • доска объявлений о продаже автомобилей (пример https://812i.ru/cars/);
  • доска объявлений о продаже квартир (пример https://812i.ru/apartments/);
  • сайт вакансий (пример https://812i.ru/job/);
  • каталог туров (пример https://812i.ru/tours/);
  • баннерная сеть на сайте (пример https://812i.ru/vip.php);
  • Корзина пользователя (пример https://812i.ru/board/favorites/);
  • Личный кабинет пользователя (пример https://812i.ru/user/);
  • Кошелек пользователя;
  • система кеширования страниц, работающих с базой данных.

Возможна продажа целой сети досок объявлений или сдача ее в аренду. Варианты:

  • головной сайт содержит доски для всех регионов России без расширений (могу продать с доменом pulse-city.ru);
  • головной сайт содержит доски без расширений для всех регионов России (могу продать с доменом pulse-city.ru), кроме 12-ти (или 16-ти) регионов, расположенных на отдельных сайтах для которых есть расширения Легковые автомобили, Продажа квартир, Вакансии, Каталог сайтов и Туры (только Москва и Санкт-Петербург). Отдельные сайты есть для всех регионов России с центром, в котором проживает 1 миллион человек. Названия таких сайтов содержат телефонный код региона (или города) + буква i (из значка Информация) + домен RU (например, https://812i.ru/, https://495i.ru/ и т.д.).
  • головной сайт с расширенными досками на отдельном поддомене (например https://812.pulse-city.ru/ или https://spb.pulse-city.ru/) для всех регионов России или только для отдельных регионов (могу продать с доменом pulse-city.ru).

Могу также создать консольную или оконную программу

Я занимаюсь также разработкой программ на языках Python, Go, Java, Node.js, C и C++. Использую следующие технологии и связки для оконных приложений:

  • Windows 8 (64-bit);
  • Java SE 8-11 + JavaFX + OpenCV 3.3 for Java + Eclipse или VSCode;
  • MinGW 8.1 (C++17) + Qt 6.1.0 (64-bit) + QtCreator;
  • MinGW 5.3 (C++17) + Qt 5.10 (32-bit) + QtCreator;
  • MinGW 8.2.1 (C11) + GTK3+ (64-bit) + VSCode или Eclipse;
  • Visual C++ 2013 (x86 и amd64) + VSCode или Eclipse;
  • Python 3.8.10 + PyQt 5.15.4 (64-bit) + OpenCV 4 + VSCode;
  • Python 3.6 + PyQt 5.10 (32-bit) + VSCode;
  • Anaconda Python 3.8.5 + PyQt 5.9.2 (64-bit) + VSCode;
  • Go 1.17 + VSCode;
  • Node.js 12.18.3 (x64) + Electron 12.0.5 + VSCode;
  • QtCreator, Code::Blocks, VSCode, Eclipse, NetBeans, Notepad++, Android Studio (редакторы кода);
  • Microsoft Office, OpenOffice 3.2 и 4.1 (работа с текстом, таблицами и др.; написание макросов, программ на VBA и Python);
  • Куча всего другого...

Где я нахожусь?

Я нахожусь в Санкт-Петербурге. Метро Ладожская, Индустриальный проспект, недалеко от ТЦ Июнь.

Какой у меня опыт?

Опыт веб-программирования с 1997 года (более 25 лет). Общий опыт программирования с 1990 года (более 32 лет). Собственный графический редактор, генератор HTML-страниц, генератор sitemap.xml, поисковый робот и др. Написано более 25 книг по программированию.

Какой у меня налоговый статус?

Плательщик налога на профессиональный доход. Проще говоря самозанятый. Проверить текущий статус можно на сайте npd.nalog.ru/check-status/. ИНН 780600222870.

Выдаю ли я чеки?

Обязательно, в соответствии с законодательством России. Чек может быть выдан как физическому лицу, так и юридическому лицу или ИП. Юридическое лицо или ИП должно предоставить свой ИНН и наименование. Если юридическое лицо является иностранным, то достаточно наименования.

Нужно ли за меня платить страховые взносы юридическому лицу или ИП?

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

Как со мной связаться?

Напишите о своем желании создать сайт на почту unicross @ yandex.ru (удалите пробелы до и после @) или через личные сообщения ВКонтакте.

Реквизиты

ЮMoney: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

Контакты

E-mail: unicross (собака) ya.ru
Страница ВКонтакте