Несколько важных вопросов для веб-мастера-новичка

• А оно вам надо?
• Лепить сайт своими руками или с помощью CMS?
• Смотри, как я умею…
• Хотите крутой дизайн?
• CSS3 и HTML5

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

А оно вам надо?  ⇑

Именно такой вопрос вам следует себе задать, прежде чем браться за детальное изучение различных языков разметки (html, xml, css), сценариев (PHP, JavaScript), а также различных их гибридов (DHTML, AJAX,CHTML). Как следует, обдумайте: стоит ли тратить на это свое время или проще заказать изготовление и сопровождение сайта в web-студии? Если Вы твердо решили создавать сайт самостоятельно, то перейдем к следующему вопросу.

Лепить сайт своими руками или с помощью CMS?  ⇑

Cисте́ма управле́ния содержи́мым (конте́нтом) (англ. Content management system, CMS)[1] – информационная система или компьютерная программа, используемая для обеспечения и организации совместного процесса создания, редактирования и управления контентом (то есть содержимым)[2]: Главной целью такой системы является возможность собирать в единое целое и объединять на основе ролей и задач все разнотипные источники знаний и информации, доступные как внутри организации, так и за ее пределами, а также возможность обеспечения взаимодействия сотрудников, рабочих групп и проектов с созданными ими базами знаний, информацией и данными так, чтобы их легко можно было найти, извлечь и повторно использовать привычным для пользователя образом. В системе управления содержимым могут быть определены самые различные данные: документы, фильмы, фотографии, номера телефонов, научные данные и так далее. Такая система часто используется для хранения, управления, пересмотра и публикации документации. Контроль версий является одним из основных её преимуществ, когда содержимое изменяется группой лиц[1].
Ну, или проще говоря, CMS – это солидный набор различных скриптов, объединенных в одну целостную систему, который превращает создание сайта в детскую забаву. Для эффективного использования CMS достаточно самых поверхностных знаний в HTML, в некоторых (довольно редких) случаях может потребоваться знание CSS.
Каковы плюсы и минусы создания сайта при помощи CMS?
Плюсы:

1. Создание сайта при помощи CMS не требует никаких специальных знаний и навыков.
2. Сделать сайт на CMS можно быстро, что экономит время.
3. CMS несёт в себе достаточно большую функциональность, что позволяет не тратить лишнее время на поиск или написание отдельных скриптов.
4. Если вы выбираете популярную CMS, то к ней обычно можно найти большое число разнообразных шаблонов и дополнительных модулей, ещё больше расширяющих функциональность, а также получить советы по настройке, установке и решению тех или иных проблем от сообщества разработчиков и пользователей этой CMS.

1. На то, чтобы разобраться с каждой конкретной CMS, освоить работу с ней, всё равно требуется какое-то время.
2. Быстро создав сайт с помощью CMS, вы получите сайт, хоть и не выглядящий убого, но похожий на множество других.
3. Иногда функциональность CMS оказывается недостаточной, либо немножко не такой, как вам нужно, и тогда вам придётся долго ломать голову над решением, в общем-то, пустяковых проблем.
4. Для простых сайтов функицональность CMS, как правило, оказывается чрезмерной, отсюда - сайты на CMS работают медленнее, занимают больше места на хостинге, в большей мере подвержены сбоям.
5. У многих распространённых CMS, увы, до сих пор не редкость проблемы с безопасностью, из-за чего ваш сайт могут взломать хакеры.

Среди бесплатных CMS наиболее широко известны WordPress, Drupal, Joomla. Среди платных - CMS Битрикс, NetСat, ABO.CMS, Amiro.CMS, UMI.CMS, Host.CMS[2].
Естественно платные CMS представляют собой более стабильные и защищенные платформы, нежели беспланые. Пользоваться CMS или нет, а если пользоваться то какой, каждый решает для себя сам. Но освоить хотя бы одну-две несомненно полезно, особенно если Вы планируете создавать многостраничный сайт с кучей наворотов, но при этом не имеете широких знаний в программировании. Кстати, о наворотах: всегда ли чем больше, тем лучше?

Смотри, как я умею…  ⇑

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

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

Хотите крутой дизайн?  ⇑

Все хотят, а каков он на самом деле мало кто скажет. Как представляет себе дизайн сайта большинство, далекое от веб-дизайна? Ответ прост - как нечто сложное. Разумную простоту отвергают и делают это совершенно зря. Если после захода на страницу пользователь не может за дизайном увидеть информацию, которую он ищет – это архипровальный дизайн!
Каковы же тенденции в веб-дизайне 2011г.? Смотрите ниже.

На сайте webdesignledger.com опубликован пост Жаклин Томас (Jacqueline Thomas) “Web Design Trends in 2011″. Представляю вам не дословный перевод, но выжимку самого интересного и полезного. Основная тенденция – уход от “красивостей” в сторону все большей функциональности и вовлечения посетителя в процесс. Дизайн призван не ослепить или заворожить, а предложить что-то интересное и полезное. И при этом быть по возможности простым, но не скучным. Во как!

1. Больше CSS3 и HTML5. Медленно, но верно отходим от Flash и все больше используем магию HTML5. Ну и CSS3, конечно же. Все больше предпочтения отдается возможностям CSS3 в плане оформления таких приятных штучек как закругления, тени, полупрозрачности и пр.
2. Простые цветовые схемы. Преимущественно монохромный дизайн. Красный, желтый, зеленый или синий – не суть важно. Важнее контрастно выделить главную часть – контент. Все остальное в приглушенных тонах. Чисто и просто.
3. Мобильность. Тут и к тетке, как говорится, не ходи. Если ваш сайт не готов вступить в мир мобильных устройств, то вы явно не готовы к 2011.
4. Параллакс эффект. Прикольная штуковина. Примеры: romancortes.com,rowtothepole.com, spritely.net. Это чтобы стало понятно, о чем речь. В двух словах: придайте вашему сайту 3D глубину! CSS и jQuery вам в помощь.
5. Дизайн для тачскрина. Если ваша мышь здохнэ! Сладкая нирвана для ревнителей юзабилити: все можно и нужно потрогать и правильно порулить. Долгие годы дизайн не задумываясь творился под мышь. Теперь все по-другому. Мыши нет. Есть жидкий экран, который ко всему прочему можно повернуть и тем самым изменить ориентацию. Может даже лучше отказаться от вертикальной прокрутки в пользу горизонтальной, как это уже стало привычным на смартфонах?
6. Еще раз о глубине. Пятна от чашек с кофе и канцелярский бардак – это уже давно moveton. Объем должен не просто присутствовать, он должен быть интерактивным. Примеры: plantate.net, nike.com
7. Большая фотография в качестве фона. Разумеется, в высоком разрешении и исключительно для подчеркивания тематики сайта. Не доминирует, не раздражает, все в меру, стильно и к месту. Примеры: somewhere-lefilm.com, iflymagazine.com.
8. Далась вам эта .com! Заиметь красивый домен в этой зоне становится все сложнее. Но на подходе масса новых и весьма занятных доменных зон вроде .me или .us. Не упустите свой шанс!
9. QR или реагируй быстрее! Штрих-код в виде марсианского иероглифа уже не редкость в печатных журналах, наружной рекламе, визитных карточках и пр. Способов применения уже немало: от пиара собственного сайта до отслеживания посетителей. В конце концов, сделайте его своим аватаром! Все больше пользы, нежели в опостылевшей физиономии доктора Хауса. Получить QR можно здесь.
10. Дизайн в миниатюре. Гугль сейчас предоставляет возможность применить специальный инструмент – лупу, которой можно быстро просмотреть миниатюрный вариант вашего сайта. И пусть разобрать там что-либо из текста практически невозможно. Однако “встречают по одежке” еще никто не отменял. Готов ли ваш сайт к этому? Если он сугубо на флэше, то вряд ли.
11. Лайфстрим или будьте живчиком. Актуально в большей степени для блогов, хотя и другим сайтам не помешает. Последние твиты, фото, потоковое видео, социальные статусы и прочее – все на виду. Сайт – не просто архив данных, пусть и свежих, но живое представление вас в сети[3].

CSS3 и HTML5  ⇑

Таково мнение наших западных коллег. Все отлично, но советую помнить, что сделать все и сразу у Вас вряд ли получиться. Начинайте постепенно с малого, а затем совершенствуйтесь. Тем же кто ринулся изучать CSS3 и HTML5, советую притормозить коней. Разработка HTML5 намечена на 2014 год[4]. Конец же разработки CSS3 вообще не заявлен, так что изучать еще просто нечего. Конечно, разработчики браузеров уже применяют некоторые из новых свойств, заявленных в CSS3, однако проблем с этим гораздо больше, чем может показаться на первый взгляд. Одна из основных – это кроссбраузерность. Для того чтобы добиться для своего сайта кроссбраузерности при использовании CSS3 и HTML5 необходимо для различных типов браузеров приписывать к атрибутам соответствующие префиксы, отвечающие за интерпретацию конкретного атрибута. Не убедил? Вы готовы мириться с увеличенным файлом стилей из-за дублирования свойств под каждый браузер? Тогда взгляните на статистику использвания браузеров в мире. Подавляющее большинство передвигается в просторах интернет при помощи InternetExplorer. Есть ли проблемы у IE с HTML5 и CSS3? Даже не буду о них рассказывать, а то статья будет стремиться к бесконечности...

Напоследок хочется дать совет, который спаc лицо многих новичков (любителей) в различных отраслях, в том числе и в сайтостроении – не умеешь, не берись. А до тех пор изучайте, практикуйте, применяйте!

Ссылки

1. Content management system[Электронный ресурс]. - Режим доступа: ru.wikipedia.org
2. Обзор CMS [Электронный ресурс]. - Режим доступа: wseweb.ru
3. Тенденции веб дизайна 2011 [Электронный ресурс]. - Режим доступа: www.mannodesign.com
4. HTML[Электронный ресурс]. - Режим доступа: ru.wikipedia.org