Подписаться на обновления блога?

Да

Нет

Картинка 3D коробки

Узнать больше

895

Вся правда о заработке на блогах

Этот БЕСПЛАТНЫЙ обучающий курс для тех, кто интересуется заработком на блоге.

Данный материал, основанный на опыте известного блогера Александра Борисова, поможет понять, как можно зарабатывать на блоге действительно реальные деньги и как правильно и эффективно монетизировать его.

  • Картинка 3D коробки

    Узнать больше

    895

    Вся правда о заработке на блогах

    Этот БЕСПЛАТНЫЙ обучающий курс для тех, кто интересуется заработком на блоге.

    Данный материал, основанный на опыте известного блогера Александра Борисова, поможет понять, как можно зарабатывать на блоге действительно реальные деньги и как правильно и эффективно монетизировать его.

  • Узнать больше

    899

    Как заработать в интернете продавая информацию

    Этот БЕСПЛАТНЫЙ обучающий курс по заработку в интернете для тех, кто хочет работать, используя свои знания и опыт.

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

  • Узнать больше

    890

    Как заработать чайнику?

    Многие задаются вопросом, как зарабатывать в интернете? Как начать работать на себя, а не на дядю?

    В БЕСПЛАТНОМ видеокурсе "Как заработать чайнику?", вы найдете много ответов на эти вопросы, которые получите от успешного практика в этой области.

  • Узнать больше

    903

    Создать сайт за 1 час!

    Хорошо известно, что для того, чтобы успешно работать в интернете необходим свой интернет-ресурс.

    Из БЕСПЛАТНОГО видеокурса "Как создать сайт за 1 час" вы узнаете, как можно достаточно быстро сделать бесплатный сайт несложным способом с нуля.

  • Узнать больше

    904

    Как начать зарабатывать на партнерских программах

    Работа на партнерских программах является одной из самых популярных видов заработка.

    БЕСПЛАТНЙ видеокурс "Как начать зарабатывать на партнерских программах" поможет вам освоить этот интересный и эффективный способ работы в интернете.

  • Узнать больше

    905

    ИНФОБИЗНЕС по модели Евгения Попова

    Этот БЕСПЛАТНЫЙ обучающий курс предназначен для тех, кто хочет познакомиться с одним из лучших видов заработка в интернете.

    В данном материале на основе своего опыта автор расскажет каким образом следует строить этот бизнес.

  • Узнать больше

    922

    HTML базовый курс

    БЕСПЛАТНЫЙ обучающий курс предназначен тем, кто делает первые шаги в сайтостроении.

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

  • Узнать больше

    924

    CSS базовый курс

    Этот БЕСПЛАТНЫЙ обучающий курс поможет разобраться в вопросах сайтостроения при создании своего сайта.

    В данном видеокурсе подробно и очень доступно даются основы языка CSS, обеспечивающего управление внешним видом веб-страниц.

  • Узнать больше

    926

    Домен и хостинг

    В этом БЕСПЛАТНОМ обучающем курсе рассказывается как разместить в сети свой вновь созданный интернет-ресурс.

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

  • Узнать больше

    927

    Фотошоп для начинающих (бесплатная версия)

    Этот БЕСПЛАТНЫЙ обучающий курс будет полезен тем, хочет освоить работу с графическим редактором "Фотошоп".

    В видеокурсе на конкретном примере показывается как создаются изображения и какие при этом используются инструменты.

  • Узнать больше

    929

    Видеосамоучитель GIMP

    Данный видеокурс поможет освоить работу с дизайном сайта при использовании БЕСПЛАТНОГО графического редактора GIMP.

    В нем можно узнать все основные вопросы по работе с редактором, а именно: что такое слои, как с ними работать, как работать с базовыми инструментами и как работать с фильтрами.

Бесплатные видеокурсы!

Хотите узнать как зарабатывать в интернете и как бесплатно сделать сайт для своей работы, ничего не потратив на обучение?

Здесь Вы можете познакомиться с проверенными способами работы в интернете в БЕСПЛАТНЫХ обучающих курсах по заработку и сайтостроению в разделе Бесплатные Сборника видеокурсов.

Вы здесь: Главная


Знак папки 2Текущее состояние создаваемого сайта

Свернуть

Знак папки 1 Все статьи cборника "Сделай сайт своими руками с нуля бесплатно"

Как сделать сайт с нуля своими руками

Здравствуйте уважаемый посетитель!

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

По существу, она представляет вводную часть сбоника статей по этой, довольно интересной и полезной теме. И в общих чертах поясняет некоторые моменты по создаваемому сайту.

И надеюсь, что данный материал поможет многим желающим самостоятельно сделать с нуля действительнно стоящий инструмент на основе самописного сайта, а не из каких-либо конструкторов или готовых бесплатных CMS.

Содержание


  • Причины создания сборника по самостоятельной разработке самописного сайта
  • Тема создаваемого сайта
  • В чем будет заключаться монетизация
  • Функционал
  • Этапы создания
  • Текущее состояние создаваемого сайта

Причины создания сборника по самостоятельной разработке самописного сайта


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

Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

Почему самописный сайт

Конечно, можно работать и на готовых CMS. Можно помимо упомянутых бесплатных СMS пытаться использовать и разного рода конструкторы, такие как Setup, Wix, Nethouse, а также сервисы Google Сайты, Яндекс.народ и другие им подобные.

Но, понятно, что сделанный за 5 минут сайт вряд ли сможет в полной мере обеспечить достойную работу такого инструмента. Большинство подобных вариантов уместны лишь для начальных шагов в освоении вопросов сайтостроения. Или при создании каких либо веб-разработок на уровне личных страничек или в учебных целях.

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

В данном сборнике статей рассматривается построение именно самописного сайта, так как на мой взгляд - это наиболее надежное, качественное решение, по многим параметрам существенно превосходящее готовые СMS.

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

А, в случае, если он еще выполнен самостоятельно, то в отличие от готовых СMS, такой сайт не будет являться "черным ящиком". Он полностью предсказуем и понятен, что позволит с успехом поддерживать его работу самому, выполняя необходимые обновления и дальнейшее развитие.

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

Более подробно о преимуществах и недостатках разных видов сайтов можно посмотреть в статье Способы создания сайтов.

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

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

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

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

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

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

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

Тема создаваемого сайта


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

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

Тема создаваемого сайта

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

В чем суть?

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

И оказывается, что один из самых верных способов отпугнуть угонщиков от автомобиля является простая маркировка автостекол.

Дело в том, что в каждой преступной группировке, которая занимается кражей и продажей автомобилей существует строгая специализация работы. И от приема заказа до угона имеется целая цепочка действующих лиц в этом процессе. И все они, естественно, после удачного мероприятия делят "прибыль".

Так вот, те специалисты, в задачи которых входит вскрыть и завести автомобиль (их называют крадунами), и которые выбирают для угона автомобиль, естественно, получают только часть от общей "прибыли". И в случае, возникновения расходов, необходимых для устранения дефектов, эти непредвиденные расходы обычно берутся из их доли, ведь это их выбор автомобиля.

С учетом того, что замена полного комплекта стекол составляет довольно приличную сумму, которая может достигать 100 тысяч рублей и более, то понятно, что такие автомобили будут не очень интересны "крадунам", так как они знают, что довольно значительные расходы на приведения автомобиля в товарный вид, они будут компенсировать из своего кармана.

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

Кроме того, автомобиль с противоугонной маркировкой проще будет искать соответствующим службам по столь значимым особым приметам, что также будет повышать уровень защиты его от угона.

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

В чем будет заключаться монетизация


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

К примеру, если стоимость работ составит 2000 рублей, то при партнерской скидке в 25% можно заинтересованных клиентов направлять в такой сервис, давая, например ему скидку в 15% и оставляя себе 10%. При таком раскладе клиент будет заинтересован сделать себе противоугонную маркировку, используя полученный на сайте промокод, и заплатив всего 1700 вместо 2000 рублей. Полученные комиссионные за клиента в этом случае будут составлять 200 рублей.

Партнерские программы по привлечению клиентов

Может, кто-то скажет, что 200 рублей с клиента не так много. Но, во-первых, все будет зависеть от количества привлеченных клиентов. А второе, это то, что главная задачей является создание и раскрутка интернет-ресурса популярной тематики, на котором было бы как можно больше посетителей, и который находился бы в ТОП поисковых систем. Тогда и от других видов заработка можно будет получать хороший доход, причем пассивный, например как при заработке на контекстной или баннерной рекламе.

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

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

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

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

Функционал создаваемого


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

  • при разработке сайта должна быть применена резиновая верстка с возможностью просмотра на всю ширину экрана в пределах от 1000 до 1600 пикселей (растягивать сайт более этой величины используя только резиновую верстку, наверное, не стоит, так как предполагается, что сайт будет двухколоночный, и при больших разрешениях без применения адаптивной верстки могут заметно искажаться его пропорции);
  • должна быть применена адаптивная верстка, при которой сайт был бы хорошо читаемым и управляемым на мобильных устройствах при минимальной ширине экранов до 320 пикселей и удовлетворял требованиям основных поисковых систем Яндекс и Google. При этом, использование адаптивной верстки вместе с резиновой должно обеспечить хорошее отображение веб-страниц на любых устройствах в диапазоне от 320 до 1920 пикселей, охватывающее подавляющее количество всех пользовательских устройств, используемых как в настоящее время, так и на ближайшую перспективу;
  • при работе с мобильными устройствами должен использоваться основной домен без переключения на отдельные мобильные версии сайта;
  • веб-страницы должны строиться на основе современных версий языков HTML5 и CSS3;
  • сайт должен быть динамическим, все его страницы должны строиться с использованием языка программирования PHP;
  • для проверки правильности ввода данных пользователем, а также в случае использования ротаторов, слайдеров и других интерактивных элементов, должен применяться клиентский язык программирования JavaScript;
  • учет информации о клиентах и полученных комиссионных при работе с партнерскими программами должен вестись в структурированном виде с возможностью фильтрации и сортировки, с использованием базы данных MySQL;
  • должна быть предусмотрена возможность поиска информации по заданным ключевым словам;
  • должна быть предусмотрена возможность подписки пользователей на обновление сайта;
  • должна быть предусмотрена система комментирования статей сайта.

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

Этапы создания


Этапы создания сайта

Как было сказано ранее, данная рубрика предусматривает весь процесс создания сайта. Поэтому здесь будут рассматриваться все основные этапы, необходимые для получения работающего сайта, такие как:

  • Дизайн
  • Верстка
  • Адаптация
  • Размещение в интернете
  • Добавление функционала
  • Оптимизация

Текущее состояние создаваемого сайта


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

1. По ссылке на зеркало сайта (размещенное на поддомене блога) имеется возможность контролировать ширину открытого окна браузера в пикселях. Что позволяет выполнять проверку отображения страниц на всем предусмотренном диапазоне разрешений экранов от 320px до 1920px, включая мобильные устройства.

В этом случае, после открытия страницы, в начале нужно изменить размер окна браузера, как показано на примере браузере "Microsoft Edge" на рис.1.

А затем, сдвигая границы проверить качество отображения страниц при различных ее размерах, соответствующих как мобильным устройствам от 320px, так и персональным компьютерам с максимальным разрешением до 1920px. При этом значение ширины будет отображаться в соответствующем поле, как показано на рис.2.

Для увеличения / уменьшения размера изображения кликните по картинке
Проверка сайта на малых разрешениях экрана

Проверка сайта на малых разрешениях экрана

В случе, если фактическое разрешение монитора (дисплея) не позволяет проверить работу сайта при больших значениях (при разрешении монитора менее 1920px), то в этом случае следует изменить масштаб браузера.

На рис.3, на примере браузера "Microsoft Edge" показано, как на мониторе с разрешением в 1600px изменив масштаб до 75% можно имитировать просмотр страницы сайта, соответствующей максимальной ширине в 1920px.

Для увеличения / уменьшения размера изображения кликните по картинке
Проверка сайта на больших разрешениях экрана

Проверка сайта на больших разрешениях экрана

2. На выделенном домене avtobezugona.ru можно посмотреть текущее состояние реально работающего сайта в обычном режиме.

скриншот 90


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

С уважением, Николай Гришин

Читать дальше


Подписка


Здесь вы можете подписаться на получение уведомлений о выходе новых статей блога.

Необходимо отметить, что данные об e-mail надежно защищены (работа сайта обеспечивается только через защищенные соединения по протоколу SSL) и не предназначены для использования третьими лицами.


  • Google+ Опубликованные статьи можно также смотреть в подборках Google+