Внимание! Сайт переехал на новый домен sayt-sozdat.ru. Пожалуйста, обновите страницы закладок с новыми URL
×
Закрытие
10
×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

Устанавливаем графический редактор GIMP

  1. Выбор графического редактора
  2. Устанавливаем программу GIMP
  3. Устанавливаем Руководство пользователя

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

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

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

Кроме того здесь можно будет посмотреть, как в этот редактор добавить встроенное "Руководство пользователя", а также приведен бесплатный видеокурс, где можно поближе с ним познакомиться.

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

Cайт на практическом примере

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

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

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

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



Автор: / Дата:

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

Создать свой самописный сайт реально

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

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

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

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

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

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

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

Содержание


  • Возможно ли самостоятельно создать сайт
  • Создавать сайты не только возможно, но и выгодно
  • Почему самописный
  • Что представляет собой создаваемый (тестовый) сайт
  • Технические требования
  • Текущее состояние

Возможно ли самостоятельно создать сайт


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

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

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

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

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

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

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

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

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

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

Создавать сайты не только возможно, но и выгодно


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

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

скриншот 50

Страница FL.ru с заказами по созданию сайта под ключ

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

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

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


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

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

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

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

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

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

Что представляет собой создаваемый (тестовый) сайт


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

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

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

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

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

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

Это как один из вариантов. Вполне возможно и применить другие соотношения, например, 20% к 5%. Тогда стоимость для клиента будет 1600 руб., а комиссионные - 100 руб. В общем, не принципиально. А данный расклад приведен здесь для понимания сути монетизации.

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

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

Вид главной страницы создаваемого сайта

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

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

Технические требования


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

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

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

Техническое задание
на разработку тестового сайта, создаваемого в рамках рассмотрения
цикла статей «Самописный сайт с нуля своими руками»

1. Общие вопросы
1.1. НазначениеСайт (ресурс) предназначен для демонстрации в качестве учебного пособия по созданию самописного сайта с целью рассмотрения основных вопросов разработки на практическом примере реально действующего интернет-ресурса.
1.2. ТемаПротивоугонная маркировка стекол.
1.3. Монетизация Партнерская программа по привлечению клиентов.
1.4. Наименование«Авто без угона»
1.5. Доменное имя «avtobezugona.ru»
2. Технические требования
2.1. Структура 1. Сайт должен представлять двух колоночную структуру (шаблон), состоящую из следующих элементов:
  • 1.1. Шапка (хедер). В данном блоке на фоне картинки с соответствующей тематикой должны быть расположены фавикон и заголовок с ключевой фразой.
  • 1.2. Область основного содержания, в котором должно отображаться содержимое загруженных страниц.
  • 1.3. Блок отображения главного меню. Данный блок должен содержать перечень всех основных страниц. Меню должно поддерживать иерархическую структуру, дочерние элементы меню должны быть “выпадающими”.
  • 1.4. Сайдбар с блоками авторизации пользователей, поиска и рекламой.
  • 1.5. Подвал (футер). В данном блоке должны размещаться элементы главного меню и информация об авторском праве.
2. В ходе разработки возможно внесение незначительных изменений не принципиального характера, не оказывающих существенного влияния на основной принцип структуры сайта.
2.2. Шаблон сайта

1. Шаблон представляет двух колоночный вид и соответствует прототипу (приложение 1 к Техническому заданию).

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

2.3. Функциональность

1. При разработке должна быть применена резиновая верстка с возможностью просмотра на всю ширину экрана в пределах от 1000 до 1600 пикселей. А также адаптивная верстка, при которой отображение веб-страниц было бы удобным для чтения и управления на мобильных устройствах при минимальной ширине экрана до 320 пикселей. Что удовлетворяло бы требованиям основных поисковых систем Яндекс и Google. При этом, использование адаптивной верстки вместе с резиновой должно обеспечить хорошее отображение контента на любых устройствах на всем диапазоне от 320 до 1920 пикселей, соответствующих подавляющему количеству всех пользовательских устройств, используемых как в настоящее время, так и на ближайшую перспективу.

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

3. Веб-страницы должны строиться на основе современных версий языков HTML5 и CSS3.

4. Сайт должен быть динамическим, все его страницы должны строиться с использованием языка программирования PHP.

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

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

7. Обработка запросов должна обеспечиваться только через защищенные соединения по протоколу SSL.

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

  • 8.1. Изменять пароль для входа в личный кабинет.
  • 8.2. Просматривать информацию о выполненных заказах.
  • 8.3. Отмечать дату выполнения оказанных услуг.
  • 8.4. Добавлять новый заказ на услуги.

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

10. Регистрация пользователя должна происходить одновременно с оформлением им первого заказа.

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

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

2.4. Перечень основных страниц (Главное меню)

1. Главная.

2. Статьи об угоне автомобилей.

3. Информационная о способах маркировки.

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

5. Контакты с адресами и телефонами сервис-центров по установке противоугонной маркировки.

Примечание: При необходимости количество страниц может быть увеличено.

2.5. Способ исполнения Сайт должен быть выполнен в самописном варианте с применением всех необходимых для этого языков программирования, без использования каких-либо сторонних платных или бесплатных CMS (системы управления контентом).
3. Прочие условия
3.1. Исходные файлы На каждом этапе разработки должны быть сформированы текущие версии исходных файлов с таблицами базы данных, предназначенные для практического применения изложенного в статьях материала.
3.2. Стоимость Данная разработка не является коммерческим проектом и все материалы, включающие описание работы и исходные файлы, предоставляются бесплатно через интернет-ресурс, принадлежащий автору.
3.3. Авторское право Полученный в ходе разработки материал является интеллектуальной собственностью автора. И предназначен только для личного пользования. Какое-либо его тиражирование или продажа третьими лицами, в соответствии с Законом об авторском праве, запрещена.

Приложение 1 к Техническому заданию: Прототип сайта

Как отмечалось ранее, данное Техническое задание составлено для случая, когда Заказчиком и Исполнителем является одно лицо.

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

 
Развернуть
×

Текущее состояние


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

Для этого предусмотрена возможность оценивать его работу в двух вариантах:

  • с использованием встроенного фрейма на текущем ресурсе;
  • на реальном интернет-ресурсе, размещенном на выделенном домене avtobezugona.ru.

    скриншот 51

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

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


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

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

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

 

Комментарии


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

Буду Вам за это очень признателен!