Веб-студия «Бенгаль»

Вредные советы для начинающих. Часть 1
бенгальский кот
bengalirk
Меня часто спрашивают, как стать веб-разработчиком, с чего начать, какую литературу штудировать. Просят поделиться опытом и раскрыть какие-нибудь секреты.
Скажу сразу — секретов никаких нет. Важно обладать трудолюбием и уметь получать кайф от результатов своей работы. Хотите делать сайты? Готовьтесь к кропотливой работе и постоянному самосовершенствованию.

Личный опыт

Когда начинал я, а было это в далеком 2000 году, полезной литературы в бумажном и электронном виде было очень мало — раз, два и обчелся. Приходилось изучать опыт других, общаться с разработчиками, познавать основы методом проб и ошибок. Поначалу это было лишь увлечением. Я не задавался целью становиться веб-разработчиком, все получилось случайно. Просто однажды я понял какое это удовольствие — видеть, как меняется создаваемый тобой сайт в зависимости от производимых манипуляций в коде. Я подсел. Проводил долгие часы в компьютерных кабинетах своего института, забивая на лекции по юриспруденции. Я даже устроился оператором ПК на полставки, лишь бы быть ближе к Интернету :) В те годы еще довольно редко встречались домашние компьютеры с подключением ко всемирной паутине. Лично мне об этом можно было лишь мечтать.

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

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

Так, неспеша, пролетели несколько лет, в течение которых я оттачивал свое «мастерство». Году к 2004-му я уже знал о существовании CSS и javascript. Кое что даже удавалось применять на практике. Правда сайты, которые мне доводилось делать, были предназначены исключительно для личного использования, либо для моих друзей. Только в 2006 году я рискнул сделать общедоступный проект, который, как мне тогда казалось, будет интересен многим людям. С помощью бесплатного сервиса ucoz.ru создал сайт, в котором практически весь код подверг кардинальным изменениям. Кроме того, я освоил основы технологии flash, придумывал красивые анимации и использовал их на сайте. В конечном итоге удовлетворения от проекта не получил и удалил его.

В 2007 году закончилась эпоха «любительского» сайтостроения. Я понял, что надо всерьез браться за саморазвитие, если я действительно хочу в дальнейшем сделать веб-дизайн своей профессией. Совершенно случано я принял участие в тендере на разработку дизайна для сайта одной иркутской газеты, и также совершенно случайно его выиграл. Это был первый опыт серьезной и кропотливой работы над сайтом. Приходилось оттачивать каждую мелочь и учитывать динамическое изменение страниц в зависимости от разделов. Мы работали в паре с программистом, поэтому на мне были только дизайн и верстка, однако работать приходилось и днем и ночью. Это был первый проект, за который мне заплатили. Сегодня, спустя 5 лет, я смотрю на этот сайт и понимаю, что дизайн то корявый, много недоработок, косяков… Сейчас я бы сделал гораздо лучше, но тогда я многого не умел, поэтому не сужу строго.

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

Если кто-то захочет поделиться своим опытом, буду рад :)

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

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

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

Сегодня таких устройств можно выделить три основных группы:
  1. Персональные компьютеры и ноутбуки (ширину экрана в данном случае принято расчитывать из минимального параметра в 960 px и практически до бесконечности)
  2. Планшеты (за пример можно взять iPad вертикальной ориентации с шириной окна браузера 768 px)
  3. Смартфоны (к примеру iPhone с учетом как вертикальной, так и горизонтальной ориентации — 320 и 480 px соответственно).
Для наглядности хочу, чтобы вы взглянули на недавно появившийся в сети сайт нашей веб-студии — www.858585.ru
Попробуйте постепенно уменьшать ширину вашего браузера до минимально возможного предела. Видите как изменяется внешний вид сайта? Блоки меняются местами, исчезают по мере необходимости, становятся крупнее шрифты и т.д.

Для тех, кому лень идти по ссылке, привожу скриншоты.


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

Каким образом это реализовано? Все очень просто. В помощь нам — передовые технологии CSS, а именно правило @media, которое нужно для корректировки документа в зависимости от предназначенного для просмотра устройства.

Рассмотрим пример кода, предназначенного для iPad:
@media only screen and (min-width: 768px) and (max-width: 959px) { здесь прописываются изменяемые для данного устройства стили }

Если необходимо убрать какой-то блок, достаточно просто использовать параметр display: none;

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

Один нюанс: думаю не стоит объяснять почему владелец смартфона не сильно обрадуется размещенному на вашем сайте изображению размером к примеру 1280×800 пикселей. Несложно представить как долго эта картинка будет загружаться. Точно также, владельцы широкоформатных мониторов не будут особо рады миниатюрным изображениям. Как же быть? Необходимо оптимизировать изображения по объему и размеру в зависимости от устройства пользователя. Для этого рекомендую сервис Adaptive Images. Система встраивается в сайт довольно просто, необходим один php-файл, .htaccess и небольшой javaScript. Система сама определяет тип устройства пользователя и в зависимости от полученных данных уменьшает изображение до необходимого масштаба, встраивая его потом в структуру сайта.

Другие примеры «реагирующего дизайна» вы можете посмотреть здесь: http://naikom.ru/blog/archives/4992.

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

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

P.S. Спецификация Media Queries поддерживается всеми актуальными браузерами, кроме Internet Explorer 7 и 8. В борьбе с IE нам поможет скрипт Respond.js (3 КБ) — это универсальное решение, способное добавить поддержку min-width и max-width.


Первый пост
бенгальский кот
bengalirk
Приветствую всех посетителей и почитателей моего ЖЖ.

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

Жду от вас предложений и конструктивной криитики!  Не стесняйтесь поделиться со мной вашим мнением, которое, поверьте, очень ценно для меня и для всей веб-студии.

Узнать подробнее о веб-студии «Бенгаль» и предоставляемых нами услугах вы можете, посетив наш официальный веб-сайт www.858585.ru.

Веб-студия «Бенгаль»

?

Log in