Сайтостроение для чайников – Сайтостроение | WebForMySelf — Как создать свой сайт, блог, интернет-магазин бесплатно и самостоятельно — Вебджем.рф

Содержание

Основы сайтостроительства для новичков.

Website

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

Для начала давайте разберемся, во всех этих странных названиях: домен, хостинг, ip-адрес, днс-сервер, веб-сервер, php, html, javascript, css, сайт, страница, скрипт, верстальщик, дизайнер, веб-программист..

Прежде всего, нам нужно получить сайт. Сайт, это в понимании пользователя, какой-то адрес в интернете, куда можно зайти и что-то там увидеть или сделать. Например, есть сайт Вконтакте (http://www.vk.com), сайт Одноклассники (http://www.odnoklassniki.ru), сайт Google (http://google.com) или мой сайт на котором вы находитесь.

Просматривают сайты через специальный программы, браузеры (или броузеры от англ browser). Вот и вы сейчас смотрите этот сайт в браузере, всего скорее ваш браузер называется Internet Explorer, FireFox, Chrome, Safari или Opera. Нет я не маг и не волшебник, и не угадал, просто это самые популярные браузеры.

Если вы просматриваете эту заметку в браузере Lynx, то дальше можете не читать 🙂

Все сайты состоят из страничек, когда вы нажимаете на какую-нибудь ссылку, то открывается страничка сайта. Например, вот одна страничка: Лебедь влюбился в вертолет, а это другая: О создании «Винни-Пуха» снимут фильм, одного и того же сайта lenta.ru.

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

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

Ctrl+U, если в Internet Explorer, нажмите Alt и выберите из верхнего меню Вид>Просмотр HTML кода. Откроется новое окошко и вы увидите html-код, примерно вот такой:

Исходный код сайта

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

На этом этапе вы должны понимать следующее:

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

Погнали дальше, разберемся с этапами создания сайта.

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

Дизайн страницы сайта от дизайнера: Алексея Попова, его сайт: http://alexey-popov.com

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

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

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

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

вначале, дизайнер создает дизайн:

Дизайн калькулятора

правда я гениальный дизайнер? 😀

далее, заказчик утверждает дизайн и наступает пора работать верстальщику.

Давайте быстренько разберем макет: основной фон страницы белый, по центру прямоугольник, у него рамка, фон внутри него серый. Внутри основного прямоугольника, 3и элемента формы, для ввода текста, у которых так же черная рамка. У первых двух элементов, текст выравнен по правому краю, у последнего по левому. В поле результата, нельзя вводить данные. Фон элементов белый. Окей, давайте верстать…

Получится вот такая страница: Сверстанный макет калькулятора

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

Для этого я воспользуюсь языком программирования JavaScript и встрою программу прямо в страницу, чтобы Вы могли её увидеть.

Теперь страница стала такая: Готовая страница калькулятора для сайта

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

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

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

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

Теперь, давайте подведем очередные итоги того, что вы узнали:

Разработка сайта проходит в три этапа: дизайн, макет, программирование логики.
Дизайнер — специалист, который делает дизайн страниц (картинки) будущего сайта
Верстальщик — специалист, который переводит картинку, в коды, которые понимает программа просмотра страниц (браузер).
Программист — специалист, который пишет логику взаимодействия элементов сайта.
Макет — картинка сайта
Верстка
— преобразование картинки в коды разметки (HTML), который оформляются стилями (CSS)
Скрипты — программы которые отвечают за логику работы (например скрипты на языке PHP, которые выполняются на сервере или скрипты JavaScript которые выполняются у Вас в браузере)

Вот так и делаем 100500 страничек, объединяя которые и получаем сайт.

На самом деле, нам не обязательно создавать 100500 страничек. Программист может передавать своим программам-скриптам, параметры и выводить их на одной и той же странице.
Например, если взять в пример наш калькулятор, мы бы могли передавать ему в параметре операцию сложения, вычитания или деления, тогда вместо четырех страничек нам бы понадобилась одна. Вот пример: Калькулятор для четырех операция. В нем можете менять тип операции, при этом как видите страница остается одна и та же. Если глянете в адрес страницы, увидите что ей передается в параметрах, один из параметров: +, -, *, /

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

Ладно, с тем как создаются сайты разобрались. Однако это сложновато как-то, может есть способ попроще…

Системы управления контентом

Т.к. большинство скриптов, выполняют типичные функции, то их уже разработали и объединили в одну систему, которая называется ЦМС ( на забугорном CMS = Content Management System или Система Управления Контентом). Ведь подумаем, что такое блог (например этот сайт), это возможность добавить запись, и вывести список таких записей. Что такое каталог, это те же записи, но упорядоченные по категориям. А что такое интернет магазин? Ну, я думаю вы и сами догадались, это каталог, только с ценами. И добрые дяди и тети, взяли и уже все запрограммировали, т.е. выполнили большую часть сложной работы, так же они уже создали и отверстали дизайны для этих систем. Эти дизайны стандартные, но они уже есть..

Например, вам не надо работать с какими-то кодами, все интуитивно просто, к примеру, я пишу этот текст в таком редакторе, не используя никакие коды, хотя есть и такая возможность:

Скриншот админ панели WordPress-а

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

Системы управления контентом бывают разные, я бы поделил их на платные/бесплатные, и на направления: сайт-визитка, блог, интернет-магазин и т.д.

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

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

Интернет магазин, так же как и блог имеет свою структуру, часто объединяет в себе, первые два типа, т.е. помимо каталога товаров, можно создать «Новостной раздел» и отдельные странички. Как один из примеров CMS от компании Magento

Что же нам надо, чтобы доработать систему управления контентом?

Во-первых, если Вам подходит функционал «из коробки», то Вам потребуется только человек который установит Вам её и возможно произведет первоначальную настройку (таких людей можно найти, например на бирже труда http://weblancer.net или http://www.free-lance.ru). И всё, можно начинать работать.

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

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

Опять подводим итоги:

Система управления контентом — набор страничек из которых состоит сайт, а так же уже разработанные возможности по управлению ими и специфическим функционалом, например добавление категорий, товаров или изменение цен. Чаще всего, в поставке уже есть несколько вариантов дизайна, так что Вам остается только все установить.
CMS для блога — WordPress
CMS для инет магазина — Magento
Биржи где можно отыскать дизайнеров, программистов, верстальщиков и прочую нечисть: weblancer.net, free-lance.ru (остерегайтесь мошенников, работайте только с людьми у которых есть отзывы, либо по схеме «вначале демонстрация работы, потом оплата»)
Веб-студия — команда дизайнеров, верстальщиков, программистов и других специальностей, которые специализируются на разработках сайтов.

Сайт готов, куда его устанавливать?

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

Итак, начнем с того, что скрипт — это программа. Программы работают на компьютере. Значит нам надо наши программы разместить на каком-то компьютере. Такие компьютеры, называют серверы. Серверы располагаются в месте который называется датацентр.

Теперь давайте я приведу аналогию: есть Вася, и на удивление это девушка 🙂 Вася, это наш сайт, ну или программа, которая представляет сайт. Васе надо где-то жить, поэтому мы селим её в квартире. Квартира — это и есть сервер. А квартиры в свою очередь располагаются в домах, дома это и есть датацентр.

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

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

Цена для простого сайта, будет в пределах 5$/месяц (по тарифам от компании Hvosting)

Кроме хостинга, Вам понадобится домен. Домен, можно представить себе как более удобное описание квартиры, где живет Вася.

У каждого компьютера есть свой адрес, он называется ip и состоит из четырех трехзначных цифр от 0 до 255. Например, вот такой адрес у этого сайта 85.10.198.57. Согласитесь, его не удобно запоминать, намного проще запомнить название it-rem.ru, так вот домен и есть именно это название.

Квартира у Васи под номером 104, а комната под номером 6, но мы ведь можем ей разрисовать двери в ромашки, и тогда всем говорить, не номер квартиры и комнаты, а «вон те двери с ромашками».

Домен покупается минимальным сроком на 1 год, цена домена, в зоне com ~ 11$/год (по тарифам от компании Hvosting)

«В зоне com», означает что у сайта будет окончание .com, т.е. например vasilisa.com, может быть ваш сайт будет в зоне .ru или .ua, это уже на ваше усмотрение.

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

Если кому интересна теория, тогда вкратце расскажу: у хостинг компаний, есть так называемые днс сервера, там они прописывают соответствия «имя»=»ip адрес», все такие днс сервера, связаны во всем мире между собой, и периодически обмениваются информацией. Примерно, через сутки, все сервера во всем мире узнают, что такое имя закреплено за таким адресом, и когда где-то в другом конце земного шара, кто-то решит посетить ваш сайт, вобъет имя, его сервер днс, преобразует это имя в адрес и будет с ним работать.

Поехали дальше, хостинг купили, домен купили, все это соединили, теперь надо туда записать наш сайт, к этому моменту он уже должен быть готов. Тут несколько вариантов, вы делаете это сами, тогда Вам потребуется FTP клиент, например программа FileZilla, с помощью которой вы сможете соединиться со своим сервером и скопировать туда файлы. Либо помощь тех.поддержки вашего хостера, вы можете отправить им файлы, например через email, а они сами скопируют их куда надо. Либо нанять, на тех же биржах труда, нового специалиста, а именно администратора, именно этот специалист отвечает за работу серверов, он же сможет и помочь с установкой скриптов на сервер и первоначальной настройкой (например созданием базы данных). В подробности этого процесса вдаваться пока не буду.

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

Подведем итоги:

Сайт — это набор программ, им надо работать на каком-то компьютере, этот компьютер называется сервер.
Услуги по аренде серверов и их кусочков (части ресурсов) предоставляют хостинг компании (например, компания Hvosting), часто их называют «Хостер».
После аренды хостинга, нам скажут ip адрес нашего сервера (например: 85.10.198.57), но его неудобно запоминать, поэтому нам надо домен.
Домен — это более удобный к запоминания адрес сайта (например: www.it-rem.ru)
Услуги по аренде доменов предоставляют хостинг компании (например, компания Hvosting)
FTP клиент — программа для копирования файлов с вашего компьютера на удаленный. Например: FileZilla
Системный администратор — специалист, отвечающий за настройку серверов
Специалист тех. поддержки хостинг компании — специалист который может помочь решить вопросы по настройке и установки сайта

Стоп, стоп, стоп — если сайт нужно сделать, до покупки хостинга, как же нам его делать и тестировать?

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

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

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

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

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

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

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

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

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

Например, про OpenServer я описал этот процесс тут: Open Server, создание домена, базы данных и простого приложения на php

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

Подведем итоги:

Тестировать сайты можно на собственном ПК, для этого вам понадобится веб-сервер
Веб-сервер, программа которая обрабатывает особым образом скрипты сайта и на выходе дает html код, который затем обрабатывает браузер и формирует красивую страничку.
Сборка — сборка программ для организации веб-сервера, включает в себя, непосредственно сами веб-сервера, интерпретаторы языков, например Perl или PHP, базы данных и другое. Наиболее популярные в русском сегменте это: OpenServer и Denwer.
Инструкции по установке сборок и их настройке, смотрите на сайтах этих сборок.

Завершение

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

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

Грамотное управление сайтом – залог успеха проекта

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

Управление сайтом, как и его создание, теперь доступно даже тем, кто имеет самое общее представление о программировании и администрировании веб-ресурсов:

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

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

Система управления сайтом (CMS, также известна как система управления содержимым) позволяет оперировать уже готовыми «кусками» кода, которые реализуют определенный функционал ресурса. Всё, что вам нужно сделать, как владельцу ресурса, это настроить работу этих компонентов в рамках вашего сайта.

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

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

Большинство CMS предполагают следующий алгоритм создания веб-ресурса:

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

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

Рассмотрим некоторые наиболее популярные системы управления сайтом:

WordPress. Идеально подходит для создания блогов, однако многие используют эту CMS для развертывания полноценных ресурсов:

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

Joomla. СMS, которая имеет обширные возможности для создания веб-проектов практически любого типа:

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

Drupal. Широко распространенная CMS, подходящая для практически любых целей:

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

Для управления выделенным дисковым пространством хостеры предоставляет удобные пользовательские интерфейсы, которые принято называть панелями управления хостингом. Наиболее распространенными являются ISPconfig, Webmin и CPANEL.

Управление хостингом сайта – непростое дело для начинающих:

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

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

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

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

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

«Как сделать сайт самому» — пособие для чайников

Добро пожаловать на сайт Ликбез

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

Стратегический вопрос – «В какую сторону идти?», мучает каждого чайника и именно на его решение он напрасно тратит кучу времени, хаотично перемещаясь с одного сайта на другой, в попытке найти ответ.

В Интернете множество сайтов, которые утверждают, что можно сделать свой сайт за день, за час и прочее. Не верьте никому! Только труд сделал из обезьяны человека, и только он поможет вам из чайника превратиться в настоящего веб-мастера. Приготовьтесь работать много и долго, а пособие «Как сделать свой сайт самому» поможет направить ваши усилия в нужное русло и прийти к намеченной цели, с наименьшими умственными, физическими и материальными затратами.

Пособие выстроено по принципу «step by step». Шаг за шагом вы пройдете все этапы создания сайта и ознакомитесь с необходимой на каждом этапе информацией. Даже не сомневаюсь, что у вас возникнет море вопросов, и не обещаю, что на сайте вы найдете ответы на все свои вопросы. Самое главное вы будете знать и понимать — что искать, как искать, и где искать. Дополнительную информацию вы сможете найти в разделе «Ликбез для чайников».

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

Выбор темы для сайта — шаг первый

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

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

Выбор доменного имени для сайта — шаг второй

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

Выбор движка для сайта — шаг третий

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

Делаем шаблон для сайта — шаг четвертый

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

Если вам интересно изучить процесс создания шаблона в мельчайших подробностях, с самого начала, то стоит внимательно прочесть уроки «Делаем шаблон с нуля для сайтов на CMS Joomla 2.5 и Joomla 3.0».

Ну если ваш мозг не в состоянии переваривать информацию о языках HTML, CSS и PHP, даже в малых дозах, то вы можете познакомиться с уникальным продуктом для автоматизации веб-дизайна –генератором шаблонов Artisteer.

В категории «Работаем над дизайном сайта» найдете советы по оформлению элементов сайта.

Юзабилити сайта — шаг пятый

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

Внутренняя оптимизация сайта — шаг шестой

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

Выбор хостинга для сайта — шаг седьмой

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

Продвижение и внешняя оптимизация сайта — шаг восьмой

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

Заработок в Интернет с помощью своего сайта

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

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

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

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

Желаю вам ясного ума, терпения и удачи! Надеюсь, что мои рекомендации помогут вам сделать свой сайт и избавиться от диагноза «чайник».

публикация тематических материалов по веб-разработке и сайтостроению

Отзывы от наших читателей

Отзыв от Микута Олеси

Купленные курсы:

Фреймворк Bootstrap: практика адаптивной верстки от А до Я

Фреймворк CakePHP: с нуля до гуру

Интернет-магазин на Joomla

WordPress-Профессионал

WordPress-Мастер: от Личного блога до Премиум шаблона

Практика верстки под мобильные устройства

JavaScript&jQuery с нуля до профи

Интернет-магазин под ключ

Корпоративный сайт под ключ

Благодаря изучению основных 3-х курсов (Интернет-магазин под ключ, JavaScript&jQuery с нуля до профи и Практика верстки под мобильные устройства) я создала уже более 10 сайтов, причем среди них есть интернет-магазины, сайты компаний, лендинг, многоязычный сайт. Есть сайты на WordPress. Один достаточно успешный сайт — copacabanaclub.kz, который не так давно победил в конкурсе на лучший проект, созданный клиентами Webformyself.com.

Мое знакомство с сайтом webformyself.com началось уже несколько лет назад. Сначала меня просто заинтересовала идея научиться создавать сайты, я начала «ходить» по разным сайтам, искать информацию, купила несколько курсов на других сайтах. Освоила html, css, основы PHP и MySQL. Но как объединить эти знания и создать по-настоящему рабочий, полноценный проект — это осталось не понятно.

Однажды так же случайно наткнулась на сайт webformyself.com. Прочитала некоторые статьи, посмотрела видео-уроки. Мне понравилось как доходчиво объясняют многие непонятные для меня моменты.

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

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

После изучения курса по созданию интернет-магазина я научилась правильно создавать БД для крупных проектов, отделять логику работы сайта от его оформления (по модели MVC), создавать множество полезных функций (авторизация пользователей, корзина), поняла как создается административная панель сайта, а также заполнила многие пробелы в знаниях по PHP.

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

Во всех этих курсах мне понравился подход к созданию сайтов. В них всегда подробно пишется и объясняется каждый участок кода, для чего он нужен и как работает. Причем работа начинается с нуля и постепенно добавляется функционал. «Белых пятен» не остается. Информация настолько подробная и полная, что параллельно можно сразу же создавать свой сайт, применяя логику авторов курса.

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

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

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

Хочу искренне поблагодарить всю команду, особенно Кудлай Андрея, Бернацкого Андрея и Виктора Гавриленко за их курсы.

Отзыв от Фоминова Алексея

Купленные курсы:

WordPress-Профессионал

WordPress-Мастер: от Личного блога до Премиум шаблона

Интернет-магазин под ключ

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

Начал я с полного нуля, до этого посмотрев курс Евгения Попова HTML, СSS.

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

Исключительно Ваша репутация в сети, и рекомендации других таких же именитых гуру интернета) А также все отзывы интернета только хорошие. Ну и сервис на высоте, видно что ориентация на клиента растет с каждым днем!

Теперь знаю куда смотреть при разбирании сайта на косточки. Научился пользоваться такими программами как локальный сервер denwer, php designer, filezilla, notepad, adobe dreamweaver, photoshop, дополнениями браузеров для быстрой проверки сайтов и нахождении необходимой строчки кода, с чего начинать писать сайт, работа с CMS WordPress, работа с шаблонами WordPress и подстраивание их под свои требования, написания структуры сайта, плана сайта добавления функция на сайт, написание кода с верстки…вообщем устал перечислять, еще кучу всего!!!

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

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

Сейчас цели связаны не с сайтостроением. Но при достижении вернусь к изучению остальных курсов. Следующим этапом будет изучение курса от WebFormyself «Верстка: сайта от основ до конкретного результата» и «Практика верстки под мобильные устройства».

Сейчас занят основами маркетинга в интернете Яндекс, Google, соц. сети и тд и попутно продажи оффлайн. Как только немного разгружусь и появится свободное время вернусь к изучению сайтостроения вместе с WebFormyself, придерживаюсь мнения что своя CMS, это все таки лучший вариант, качественно, чистота кода, профессионально и главное УНИКАЛЬНО!

Курс очень объемный требует только время. Мне понадобилось около месяца в день уделял по 3-4 часа. При изучении вопросы которые возникали, удавалось все решить самому.

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

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

Отзыв от Разумовского Максима

Купленные курсы:

Интернет-магазин под ключ

С помощью приобретенного курса я научился разрабатывать сайты по шаблону MVC. До знакомства с курсом я понятия не имел что такое шаблоны проектирования и зачем они нужны. Но понимание разработки сайтов по шаблонам проектирования стало гигантским скачком в моем развитии как программиста и разработчика сайтов. Кроме того именно этот курс научил меня разрабатывать для сайтов собственные CMS и сейчас мне проще написать для любого сайта собственную панель управления чем использовать и каждый раз затачивать под сайт какой-нибудь WordPress или Jooml-у.

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

Начинал я в далекие 2000-е с изучения XHTML. Тогда еще ни кто не готовил видеокурсы и приходилось собирать информацию по книжкам и тематическим сайтам. Было много длительных перерывов в моем развитии как разработчика и о профессиональном занятии созданием сайтов я даже не предполагал. Сейчас разработка сайтов это моя основная деятельность которая меня кормит. Я уже и не представляю что такое каждое утро ходить на работу. Моя жизнь полностью планируется только мной и зависит только от моей занятости.

На самом деле у меня очень долго не могла проявиться полная картинка процесса создания сайта. Я знал HTML и CSS, мог «слепить» несколько страничек связанных между собой гиперссылками. Но сделать по настоящему что-то стоящее я не мог. Кроме того знаний HTML и CSS было явно не достаточно для полноценной работы. Именно видеокурсы, в том числе кусы webformyself, собрали в моей голове картину «процесс создания сайтов» из обрывков знаний и помогли расширить объем знаний и навыков.

Понимание того, что купив курс «Интернет-магазин под ключ» я научусь писать движки для сайтов, зародили в моей голове маниакальное желание приобрести этот курс. Кроме того в программе курса состояли бонусом полные курсы по PHP и MySql. А это профессиональная информационная база для любого веб-программиста. Т.е. я понимал что я не просто изучу PHP и MySql но и напишу свой движок, при чем не просто движок какого-нибудь сайта визитки, а самый что ни есть настоящий движок интернет магазина.

Купив курс «Интернет-магазин под ключ» я не только изучил PHP и MySql, но и научился создавать собственные CMS для сайтов. Создание каталога товаров, ЧПУ, хлебные крошки, авторизация на сайте, постраничная навигация для сайта. Большей части того что я умею сейчас я обязан именно этому видеокурсу.

Больше всего наверно запомнилось, как я никак не мог вникнуть в суть шаблона проектирования MVC. Наверно раз 7 я просматривал этот момент, в итоге осознание пришло только утром следующего дня. До «жираф», но главное что дошло.

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

Хотел бы поблагодарить команду WebForMySelf за их нужную и очень полезную работу. Я уверен что, я не единственный для кого WebForMySelf открыли мир веб-разработки, тем самым изменили жизнь, положив начало для нового интересного и прибыльного занятия по жизни. Если сказать прямо то без WebForMySelf не было бы меня как веб-разработчика. Поэтому от Всех нас и от себя лично хочется поблагодарить команду WebForMySelf и пожелать увеличение роста продаж в геометрической прогрессии с каждым новым курсом.

Отзыв от Деникаева Тимура

Купленные курсы:

Фреймворк Bootstrap: практика адаптивной верстки от А до Я

Практика монетизации блога: от раскрутки до реальных денег

Фреймворк CakePHP: с нуля до гуру

WordPress-Профессионал

WordPress-Мастер: от Личного блога до Премиум шаблона

Карьера веб-дизайнера. С нуля до первой продажи за 14 дней

Мастер веб-дизайна 2.0

Практика верстки под мобильные устройства

JavaScript&jQuery с нуля до профи

Интернет-магазин под ключ

Практика резиновой верстки

Премиум клуб

WordPress-Ученик

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

Я боялся, что у меня ничего не получится. Были большие сомнения стоит ли начинать в таком возрасте???

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

Я многому научился и до сих пор черпаю огромные знания в области Веб-программирования из видео уроков Андрея и….. Андрея ).

Так как я все время говорю не об одном курсе, то хочу сказать, что в каждом из них есть свои запоминающие моменты. Трудно сказать, что запомнилось больше всего. Правильнее будет сказать, что «воды» там совершенно НЕТ. Все четко, лаконично и на профессиональном уровне!!!

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

Я безумно рад, что мне очень повезло познакомиться с командой Webformyself. Они действительно, делают неоценимый вклад в область Веб индустрии. Хочу отдельно выразить огромную благодарность Бернацкому Андрею и Андрею Кудлаю. Если один из них Автор с Большой Буквы, то у другого это просто ДАР!!! Ребята, ВЫ МОЛОДЦЫ!!!

«Как самому создать сайт?» – Яндекс.Знатоки

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

1. Платные и бесплатные коробочные CMS.

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

Наиболее популярные — WordPress, Joomla, OpenCart, Drupal (бесплатные лицензии), Bitrix (платная лицензия). Есть видеоуроки, форумы, готовые модули и расширения.

Важные задачи при создании данным способом:

аренда домена

Домен — это имя или адрес сайта. Его нельзя купить навсегда, можно только арендовать. Аренда оплачивается каждый год. Рекомендация: тщательно продумывайте имя сайта. Оно должно быть максимально коротким, простым и запоминающимся, отражать суть бизнеса.

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

2. Облачные SaaS-платформы или онлайн-конструкторы.

Например, beseller.by или getopencart.com

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

В зависимости от возможностей платформы можно внести корректировки в дизайн, оформление, структуру страниц и т.д.

Создание на платформе или конструкторе может быть платное (зачастую) или бесплатное.

Преимущества:

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

Это наиболее подходящий вариант для создания интернет-магазинов, витрин, корпоративных сайтов, ленденгов.