Как создать сайт интернет магазина

02.08.2010

 

 

Про интернет-магазин

Маленькая статейка про то, как создать интернет магазин. Конечно тут не полный урок создания сайта, а только короткий процесс создания шаблона для конструктора интернет магазина. За основу был взят движок shop-script. Это старый движок интернет-магазина, который можно найти в интернете за небольшие деньги или вообще бесплатно. Тематика интернет-магазина - звуковое оборудование и инсталляция AV техники. Вообще я много чего делаю, а интернет-магазины распространенное явление в большом городе. Все покупают, продают, всегда так было и будет, только сейчас плавно переходят в интернет.

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

Процесс создания дизайна интернет-магазина

Для начала надо определиться на какой платформе или точнее сказать на каком движке будет магазин. Я буду создавать магазин HI-FI техники. Домен называется art-sound.ru. Учитывая, что домен уже был, не я его выбрал, все равно мне захотелось обыграть это слово. ART-искусство. Вообще музыка это искусство, а живая музыка это вообще круто. Магазин будет специализироваться на дорогой AV технике. Супер ресиверы и процессоры обрабатывают звуковой сигнал так, что на выходе звук становится почти живым. Я это знаю, т.к. у меня стоят две маленькие колонки для компьютера, и моя мечта это хорошая AV техника, исключительно СТЕРЕО и только для музыки. Ведь для качественной музыки нужны всего две хорошие колонки, хороший усилитель или ресивер, который будет усиливать и обрабатывать сигнал. Для объемных звуков в кино, нужен комплект по больше, 5 колонок (2 фронтальные, 2 задние и 1 центр), сабвуфер, ресивер с процессором обработки трехмерного звука. Можно еще круче - 7 каналов, тогда ресивер должен так же поддерживать систему объемного звука 7.1. Для этого есть много литературы, которая поможет вам выбрать то что нужно. Это все сугубо индивидуальный выбор, т.к. техники для этого большое количество.

Внешнее оформление интернет-магазина - дизайн

И так я начинаю создавать наш магазин. Движок я выбрал самый простой shop-script. Открываю photoshop для того, чтобы сделать макет для интернет-магазина. Создаю файл размеров около 1000 пикселей по ширине.

рама для картины

Хочу сделать что то в виде картины. Ищу рамку как на картине. Надо искать картинки в интернете с однородным фоном. Нашел рамку от картины, но все равно пришлось вырезать кусок и делать всю рамку однородную, чтобы потом можно было сделать повторяющийся фон при увеличении размера экрана. Хотя особо широкий магазин я не хочу, сделал максимум на 1200 пикселей по ширине. Ну если это искусство, то тут не обойтись без мольберта, его я поставил ниже и чуток перед рамкой, когда что-то где-то вылазит это выглядит прикольно, т.к. не понятно как это делать в HTML коде, приходится ухитряться или делать совсем просто. Сначала я хотел сделать мольберт вторым слоем, специальным слоем <DIV>. Но потом подумал, что приз за лучший код в CSS мне не дадут, я сделал просто одним слоем.

мольберт для рисования

Самое главное в создании сайта - это побольше всяких фишек. Я добавил еще пару клякс, провода hi-fi с золотым сечением, и конечно же мою 3Д модель домашнего кинотеатра стоимостью 30 000 долларов. Для моделирования в  3Д требуется большой опыт, если вы задумали использовать 3Д модели, можно найти их в интернете. А если не хочется долго париться, можно найти картинку нужного ракурса, обработать в фотошопе и вставить на сайт.

3Д модель домашнего кинотеатра для интернет магазина

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

логотип для интернет-магазина

Свою 3Д модель домашнего я поставил около логотипа, и указал что где находится, где передние колонки, задние, сабвуфер - вообщем что-где-когда! Хороший дизайн бы получился если смоделировать всю комнату и интегрировать всю возможную технику. Тогда можно было создать типо ШОУрума, где можно включить музыку, при наведении мышкой загорались подсказки. Еще все это на флеше с анимацией. Но анимация не всегда хорошо, иногда лучше сделать из картинок, т.к. флеш у многих просто отключен, и пользователи бы видели пустой экран. Если соберетесь делать анимации или интерактивные интерфейсы на флеш, то подключите скрипты и заглушки для тех, кто отключает всю анимацию. Если не будет работать флеш, всегда будет подложка из обычной картинки. Ну вот я за несколько дней создал этот шаблон. Конечно если бы я создавал его с нуля, и создавал бы все элементы заново, 3Д модели, у меня бы на это ушло несколько месяцев, поетому я использовал свои наработки чтобы ускорить этот процесс. Теперь приступаем к созданию шаблона для shop-script. Для начала надо нарезать макет на маленькие картинки.

Верстка макета для сайта

Вот такими маленькими квадратиками нарезается макет. Создается сетка в фотошопе и точным выделением до пикселя создаются десятки маленьких картинок, чтобы потом было с чем работать с HTML версткой шаблона для будущего магазина. В итоге получится одна страница HTML. Все тонкости верстки интернет страниц рассказать нельзя. Я делаю все в перемешку и <table> и <div>, как говорится на войне все методы хороши. Главная задача, чтобы в итоге эта страница выглядела одинаково во всех известных броузерах Opera, Iexplorer, firefox, safari, google chrome и др.

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

Для работы интернет магазин нужен хостинг с поддержкой обработки скриптов PHP и MySql базы данных. Если ваш магазин будут посещать 200-300 посетителей в сутки, то хватит любого хостинга стоимостью 2-3 тысячи рублей в год. Если же магазин будут посещать 2-3 тысячи человек в день, то обычного хостинга уже хватать не будет, и тогда нужен либо свой собственный сервер либо виртуальный сервер, который стоит около 12-15 тысяч рублей в год.

В итоге получится вот такой сайтик:



Оставить комментарий...

Добавить комментарий


Защитный код
Обновить