Создаем сайт фотографа («свадебный фотограф-2011»)

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

Наталья:
Здравствуйте, Сергей. В одной из своих заметок вы обещали рассказать как сделать простенький сайт. Вы выполните свое обещание?
PS. Спасибо вам за ваши посты. Жду их каждый раз с большим нетерпением.

Портфолио Сергея Самсонова

Скриншот: портфолио Сергея Самсонова

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

Зачем фотографу сайт?

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

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

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

Сайт для продвинутых фотографов

Начну рассказ в обратную сторону: по-настоящему уникальный и неповторимый проект могут сделать только люди, которые возьмут с вас за это немало денег — цены разработки индивидуальных проектов начинаются с 60 000 руб. в Москве, причем ядром будет уже имеющееся решение, как правило, бесплатное. При наличии знаний, уходящих далеко за пределы понимания слова «ссылка», можно озаботиться этой задачей и лично, только, естественно, следует предварительно конвертировать указанный выше ценник в часы изучения особенностей имеющихся популярных простых решений плюс адаптация к новой деятельности вообще. Другими словами, не стоит думать, что программисты и дизайнеры берут деньги за воздух. Начинать работы можно с таких скриптов, как WordPress, Drupal, Joomla — эта троица сегодня гоняет кровь по интернету, и хоть изначально имеет текстовую основу (на базе первого построен сайт, с которого вы читаете эту самую публикацию), зато очень бесплатную. Применив к ним немного мозга, вы все быстро поймете. Если же ваши знания уходят даже дальше базовых, и слова PHP, AJAX, XHTML и прочие, можете копнуть еще глубже и построить сайт из кубиков с самого фундамента, который найдете в недрах CakePHP или modX.

Сайт для начинающих фотографов

В большинстве же случаев, фотограф, на мой взгляд, не готов к таким испытаниям (в особенности, это касается тех, кто вообще только раздумывает над тем, нужен ли собственный сайт вообще). Здесь уже надо думать, какой вариант выбрать из стандартных. Многие довольно популярные сервисы позволяют использовать свои ресурсы, просто для того чтобы помогать фотографам делать свои довольно приятные глазу портфолио: как пример, можно посмотреть на Zenfolio, Gallery.ru или 500px. Там можно не просто разместить свою галерею, можно еще и сделать так, чтобы она открывалась с вашего собственного домена. Таких сайтов, на самом деле, больше, я только о популярных написал. Смысл заворачивания на свой домен понятен — в обратную сторону идет куча неснимаемых ссылок и поток пользователей, за счет которых ресурсы и развиваются. Именно это, кстати, и является основным недостатком таких сервисов.

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

Есть, правда, и другое решение, которое я выбрал лично для себя по рекомендации одного хорошего дизайнера, рисовавшего «лицо» Rosbest. Скрипт называется Concrete5 и сделан примерно по такой же логике: вы скачиваете архив с ним, заливаете на свой хостинг, оттуда инсталлируете (подробные инструкции содержатся в прилагаемом текстовом файле, так что не пугайтесь — конечно, если английский знаете), после чего начинаете спокойно творить.

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

Если слово слышите впервые, прочитайте абзац ниже, в противном случае, проходите дальше. Хостинг — это безусловная услуга, оплатить которую вам понадобится, чтобы у вас сайт 24 часа (на самом деле, чуть меньше) был доступен. Сегодня цены на хостинг опустились так низко, что оправдалка, вроде «у меня нет денег» здесь уже не проходит. Глючный Мастерхост (мы с него уехали, потому что имеем несколько претензий к качеству одного из крупнейших хостеров, рекомендовать остальных тоже не будем, это вкус каждого), например, нормальные тарифы начинает от 200 рублей в месяц. Можно найти дешевле, можно дороже. Цена определяется здесь несколькими факторами: раскрученностью бренда (Мастерхост крутой, потому частично вы именно за его популярность и платите), надежностью услуг (у любого сервера есть периоды неактивности под названием downtime, то есть, когда сайты лежат, и периоды активности, uptime — в процентах от 24 можете и сами посчитать, но цифры эти, как правило, усредняются, а потому, для эконом-класса получается даже завышение), стратегией работы (развитие/стабильность) и количеством услуг. Вполне адекватная цена для хостинга сегодня может начинаться и от 100 рублей в месяц (желательно платить за год-два, тогда будут скидки и спецакции, вроде бесплатного домена на первый год).

Требуется для сайта сегодня наличие PHP и MySQL, остальное уже просто бонусы, и если вы их не понимаете, вряд ли сможете использовать даже частично, потому просто скидывайте со счетов. Обращайте внимание не просто на наличие серверного ПО, но и на его версии — в большинстве случаев, это касается PHP5… как ни странно, в России еще есть некоторые компании, которые его не поддерживают, в то время как большинство скриптов западные и требуют его по умолчанию. Я понятия не имею, в чем разница между версиями, не советую вникать и вам, просто на циферки смотрите.

Покупать хостинг лучше в крупных компаниях — у них и регистратор свой, а значит, просто платить проще. Это, естественно, чуть дороже в итоге, зато удобнее. Смысл в следующем: хостинг — это только пространство на диске, а вам ведь еще и адрес нужен (это как квартира в строящемся доме с временным адресом — письма никогда не придут), за который уже отвечает компания-регистратор, которые собирают ежегодные сборы в размере 150 рублей за адрес в зоне .ru. Что вы делаете: покупаете хостинг в крупном хостере, там же берете адрес (юридически разные компании, но платите в одну корзину). Когда покупаете адрес, регистратор спросит у вас данные NS-серверов, которые должен предоставить хостер — их вы предоставляете регистратору через соответствующую форму, и максимум через 72 часа уже увидите сайт на нужном месте и сможете работать по его постоянному адресу.

Создаем сайт на Concrete5

Как я сказал, как только у вас появится место в сети, там можно писать все, что угодно. Естественно, если правила знаете. Хостинг провайдер даст вам логин и пароль, как минимум, для FTP — это специальный протокол для отсылки файлов в обе стороны. Естественно, чтобы работать с ним, надо, чтобы была установлена специальная программа, вроде Filezilla, которому надо скормить адрес сайта (вроде ftp://ftp.domain.com), логин и пароль, тогда сможете отсылать туда все, как в обычном браузере, да и просто перетаскиванием тоже. Скачав инсталлятор скрипта, мы его разархивируем на компьютере и содержимое папки Concrete 5.4.1.1. (без самой папки) перекачиваем в корневую папку своего сайта (то, что открывается при подключении).

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

Concrete_themes

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

Редактирование страницы

Затем начинаем создавать структуру сайта (имеет смысл в разделе Sitewide Settings → General → Linking поставить галку напротив Enable Pretty URLs — иначе в адресах будут светиться файлы .php, что считается некошерным): идем на главную страницу, которая создается автоматически, и, если залогинены (в противном случае внизу ссылка Sign in to edit this page), кликаем на иконку Edit page — в итоге, сайт преображается, и обводит основные блоки красными линиями, кликнув в каждый из которых, можно увидеть меню основного функционала:

  • Edit — редактировать блок
  • Copy to Scrapbook — копировать в записную книжку
  • Move — передвинуть
  • Delete — удалить
  • Set custom template — установить другой шаблон оформления

Добавить блок

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

 

  • Content — добавление блоков с текстом и картинками, отформатированного стандартно в соответствии с темой оформления
  • HTML — кусок кода (не добавляйте так счетчики показов, их код надо добавлять в админпанели, Sitewide Settings → General → Tracking code), этим вы будете пользоваться нескоро
  • Auto Nav — вставка автоматического меню навигации (в него не входят страницы, при создании которых вы указали Exclude from nav)
  • Page list — список страниц-дочек, с описанием из Description в параметрах страницы, по отношению к любой из страниц, удобно для листинга разделов (поддерживается RSS, удобно для новостей)
  • Image — вставка картинок, с кучей функций, вроде показа другой при наведении, ссылок и текста, замещающего картинку при отсутствии
  • Guestbook — гостевая книга, которая может использоваться как комментарии, к примеру, подходит для раздела с отзывами (у меня совершенно честно работает для отзывов о моей работе самих молодоженов)
  • Slideshow — довольно простой скрипт для показа картинок
  • Videoplayer — хорошая возможность показывать на сайте слайдшоу, если вдруг Youtube не дает из-за длины или использования копирайченных мелодий в саундтреке

После изменения любой страницы надо нажать кнопку Exit edit mode → Publish my edits. Интересно, что все версии страниц на сайте хранятся, так что всегда можно откатить результат изменений назад.

добавить страницу

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

  • Name — название страницы в недрах сайта (например, «Свадебная съемка»)
  • Alias — подадрес, который добавляется к строке адреса сайта (например, «wedding»)
  • Description — поле описания страницы для вывода на сайте (например, когда выводится список страниц с их описанием)
  • Meta title — как заполняется параметр title веб-страницы, т.е. название страницы уже в HTML (например, «свадебный фотограф Сергей Самсонов»)
  • Meta description — как заполняется параметр description веб-страницы в HTML (вполне может соответствовать описанию, если вдруг не хотите как-то хитро выпендриться)
  • Meta keywords — как заполняется параметр keywords веб-страницы в HTML (вводите только соответствующие истине ключевые слова, соответствующие оным на самой странице, иначе поисковики их все равно учитывать не будут, приписав вам отрицательную карму в выдаче)
  • Exclude from Nav — надо ли включать страницу в список подлежащих выводу в меню автонавигации (обновляется сразу на всех страницах, где вставлен код автовывода)

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

  • не забывайте ссылками указывать свои другие страницы в пределах уже имеющихся, потому что одной навигацией пользователь сыт не будет
  • на сайте фотографа портфолио должно занимать ключевое место, отведите ему его, чтобы не приходилось его долго искать
  • не располагайте на страницах глупого поискового спама, невидимых надписей и прочей ерунды, поисковики это все видят и ужасно не любят
  • старайтесь обеспечивать соответствие между названием страницы в title, текстом страницы и уж тем более названиями разделов — тут надо просто немного подумать, чтобы не было ничего лишнего (написать 20 раз «халва» не хватит, чтобы Яндекс почувствовал сладость, поверьте)
  • зарегистрируйтесь на сервисе статистики (Яндекс.Метрика, Google Analytics или Liveinternet.ru) — будете знать основные тенденции
  • не торопите результат, поисковики считают, что свежие сайты все равно на 90% вымрут через пару лет, поэтому быстро прописывать их в рейтинги не спешат
  • зарегистрируйтесь на сервисе вебмастеров (Яндекс.Вебмастер, Google для Вебмастеров) и следите за тем, как и что поисковики делают с вашим сайтом — там можете указать регион вашего сайта или даже свой «адрес организации»… особой пользы или вреда от них не будет, но сайт с ними смотрится точно серьезнее. Кстати, там же добавляется новый сайт, чтобы Яндекс его заметил, в противном случае, будете ждать ссылок на вас (на это у Яндекса иногда уходит до одного месяца, просто чтобы проиндексировать главную страницу хотя бы).

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

Такой подход к сайтостроительству мне самому больше нравится, отчего я его и выбрал, хотя мог пойти куда более сложным путем, ибо отношу себя к продвинутым пользователям. Так проще делать сайт постепенно (сайт при этом живет, обратите внимание, а не как вечный ледник стоит на месте, ожидая, пока отколется и улпывет в океан), можно увидеть где-то какие-то приятные мелочи, о которых не знал, не думал или просто не делал. Я вот себе только недавно сделал иконку сайта (показывается в браузере в адресной строке и на ярлыке странички, в Яндексе проще увидеть в результатах поиска), хотя знал об этом лет пять (примерно с тех пор, как на «Фокусы» делал)… лень, видимо. Для этого нужна картинка, желательно с прозрачностью вместо белых зон, вы ее грузите на один из сервисов для генерирования иконок, скачиваете оттуда полученное изображение, кладете файл favicon.ico в корень сайта и наслаждаетесь жизнью.

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

19 комментариев

  • Спасибо! Очень пригодилось!

  • Создать сайт фотографа вполне возможно, если даже нету никаких знаний основ HTML, CSS, PhP программирования или отсутствует желание этому учиться. Делают этот проект с помощью различных движков CMS (WordPress,Joomlu и других) или на UCOZ.

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

  • Алёна says:

    Есть отличная CMS нашего производства: http://cportfolio.ru
    Очень удобная и простая в использовании!
    Рекомендую посмотреть! ))

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

  • ВолАнд says:

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

  • Илья says:

    Все очень удачно и подробно, однако есть альтернативный путь. Совершенно бесплатно и с незначительными затратами времени. Мой личный сайт http://fotoxronika.jimdo.com/ – конкретный пример!

  • ВолАнд says:

    Знаете что я сегодня подумал слушая последний подкаст?))
    аааа…))
    Хотелось бы свадебный подкаст!

    Подкаст посвященный свадьбе и все что с ней связано.!

  • А что если хочется флеш-галерею, вот прям хочется-нимагу.
    Что вы посоветуете? Забить и делать обычную, или подолбаться с готовыми решениями?

    • Вот лично я к флеш-галлереям отношусь очень негативно с точки зрения пользователя:
      1) надо флеш-плеер (я на телефоне удалил его, что бы батарея больше держала)
      2) как делиться фотографиями? “зайди по этой ссылке, там будет флеш-галлерея. Вот там 18-я фотография мне понравилась. Классная, да?” Если мне кто то такое пришлет, я даже открывать не буду.
      Я давно понял, что создавая свое надо удовлетворять свои хотелки, но не в ущерб удобства и простоты.

      Максимум, для чего годяться флеш-галлереи – только для портфолио. Причем небольшого, но очень качественного.
      Вот так я думаю !

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

        Я даже больше с технической точки зренения спрашивала.

        • С технической стороны это проще простого. Насколько помню, даже Lighroom умеет создавать флеш-галлереи (файлик swf). Чуть что меня UncleSam поправит.
          Берете любую самую простую CMS, делаете там страничку с названием “портфолио” и туда прописываете свой файлик. Вот и всё. Даже, в принципе и CMS не надо – можно ограничиться чистым html. Сделать 2 странички (одна с портфолио, вторая с контактами) и всё.

          • ммм, очень интересная мысль, спасибо.
            Сейчас буду её думать.

          • Заодно чтоль код укажи, как вызывать swf файл. Это же тебе не ссылку указать, надо объект корректно интеггрировать.

            Amina, У нас в башке флешка стоит, посмотрите, как в коде страницы она вызывается, и можно сделать, как Сергей сказал.

      • Airtight Viewer, который в комплекте Lightroom идет, позволяет и фото пронумеровать, и открыть в новом окне, если задано при редактировании. Глупый готовый скрипт, но для показа заказчику вполне подходит.

  • Прочитал первых пару абзацев, а дальше пролистывал.
    Сейчас могу сказать 2 вещи:
    – как жаль, что я захотел себе “нечто этакое”, что невозможно реализовать на простых для пользователя CMS (но это меня не останавливает). Так что если важна дата старта сайта – читайте статью не как я, а внимательно, и “забейте” на свои хотелки. С другой стороны “ничто не бывает настолько постоянным, как временное”.
    – если вы хотите сделать не простой сайт – сперва выберите хостинг (или несколько). Потому что сейчас встала проблема, что я делаю сайт под одни версии программ (PHP и т.д.), а на хостинге предоставляют только младшую версию. Этим сэкономите время.
    Вообще сейчас хочу все таки купить хостинг, не прописывать доменные имена и играться сразу на хостинге, чем играться на своем компьютере, а потом еще геммороится с переносом сайта на хостинг.
    Вот.

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

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

  • Очень интересно, спасибо! Теперь бы разобраться ос всем)

Leave a Reply

Your email address will not be published. Required fields are marked *