Верстальщик сайтов это – кто это, чем занимается, что ему нужно знать, средняя зарплата специалиста

Верстка сайта – что это? Определение, создание верстки и ее виды

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

Определение верстки сайтов

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

Если говорить простым языком, то это процесс создания веб-страниц с помощью специальных языков, которые как раз для этого и предназначены. Для этого дела используется HTML, CSS и JavaScript. Последний является одним из языков программирования и позволяет писать веб-сценарии, в первые два позволяют полностью сформировать страницы будущего сайта, разместив на них нужное содержание и оформив его должным образом. На самом деле, ничего сложного в этом нет, как думают некоторые.

HTML – это язык разметки гипертекста.

С его помощью формируется сама структура, каркас сайта. Соответственно, без HTML верстка просто невозможна!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Далее нам нужно разобраться с тем, что представляет собой второй язык – CSS. Расшифровывается эта аббревиатура так – cascade style sheets. То есть, каскадные таблицы стилей. Если вы новичок, то едва ли что-то сейчас поняли. Но давайте попробуем объяснить простыми словами. CSS – это все, что связано с оформлением страницы.

Например, в HTML мы можем создать абзацы, таблицы, блоки, да и все, что захотим. Но все это будет выглядеть очень невзрачно. Для оформления каркаса и создания по-настоящему красивого шаблона нам нужен CSS. Итак, вопрос: “Что такое верстка сайта?”, я надеюсь, у вас отпал. По крайней мере, вам стало понятней.

Ну а что такое JavaScript? “Почему вы о нем ничего не рассказываете?”, — справедливо спросите вы. Как уже говорилось ранее, это язык программирования и он очень активно применяется в верстке. Наверняка вы не раз бывали на сайтах, где при определенных действиях происходят определенные вещи. Например, при клике на меню вылазит дополнительный блок, наведение на элемент меняет его внешний вид или при переключении кнопок меняется содержимое, показываемое в каком-то контейнере. Все это очень полезные вещи, но реализовать их на чистом HTML и CSS невозможно.

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

Суть верстки

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

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

Как создается сайт?

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

Допустим, макет у нас есть. Дальше нам нужна программа, в которой будем писать код.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Рис1. Верстка сайта в Notepad++

Макет имеем, программа есть. Можно приступать к работе.

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

Какие бывают виды верстки?

Нам осталось разобраться еще с одним вопросом для получения более-менее явной картины. Оказывается, верстать можно по-разному.

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

Рис. 2. Горизонтальный скролл при уменьшении окна – явный признак фиксированных размеров

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

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

А что такое адаптивная верстка сайта?

О, здесь мы подошли к самому современному, продвинутому и сложному способу создания шаблона. На самом деле достаточно слова “адаптивный”, чтобы начать понимать, что происходит с такой страничкой.

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

webformyself.com

Интернет-профессия: верстальщик сайтов

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

Интернет-профессия — верстальщик сайтов

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

Браузеры преобразуют код в понятную и доступную людям интернет-страницу. Своеобразным посредником между веб-дизайнером, создавшим графическое оформление сайта, и программой-браузером является верстальщик. Без работы верстальщика мы не сможем видеть сайты в нормальном, “человеческом” виде.

Кто такой верстальщик сайтов?

Верстальщик сайтов – это специалист, занимающийся компоновкой текстовых, иллюстративных и иных элементов на веб-странице.

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

Так выглядит код начала этой страницы. Обычному человеку ничего не понятно!

Что должен знать верстальщик сайтов?

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

Верстальщику необходимо знать некоторые компьютерные языки:

• языки разметки HTML, XHTML, XML;
• язык программирования PHP;
• каскадные таблицы стилей CSS.

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

Одним словом, работа верстальщика довольно сложна и трудоёмка. И на хороших специалистов всегда существует большой спрос.

Кто нуждается в услугах верстальщика сайтов?

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

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

Надо ли учиться на верстальщика сайтов?

Получите скидку 5% по промокоду p151069_irzhi

Надо сказать, что на данный момент большинство верстальщиков — самоучки. Но ситуация меняется и на рынке появились отличные специализированные курсы по вёрстке. Серьёзные работодатели об этом знают и при прочих равных условиях отдают предпочтение верстальщикам с “корочками”.

Обучение на курсах займёт от 1,5 до 3 месяцев. Для новичков вёрстки отлично подойдёт онлайн-интенсив “HTML-вёрстка: с нуля до первого макета” от известного российского центра онлайн-образования “Нетология”.

Онлайн-интенсив длится 1,5 месяца. За это время Вы освоите HTML, CSS и Photoshop и научитесь верстать сайты под руководством опытных и известных front-end-разработчиков. После успешной защиты дипломной работы Вы получите диплом HTML-верстальщика и сможете устроиться на интересную и денежную работу.

Я дарю Вам 

скидку на обучение HTML-вёрстке в размере 5%. Для получения скидки при регистрации на онлайн-интенсив в поле промокода вбейте код “Нетологии” “p151069_irzhi”.

Если Вы не новичок в HTML-вёрстке и хотите получить профессию front-end разработчика, то рекомендую Вам внимательно посмотреть на онлайн-интенсив “HTML-верстка: инструменты и приемы профессиональной front-end разработки”. Во время обучения Вы под руководством персонального наставника-практика освоите современные технологии — HTML5, CSS3, Java Script и многие другие. После успешной защиты диплома Вы можете сделать новый шаг в своей профессиональной карьере и стать front-end разработчиком.

На эту программу также распространяется

скидка в размере 5%. Для её получения при регистрации на обучение в поле промокода вбейте код “Нетологии” “p151069_irzhi”.

Получите скидку 5% по промокоду p151069_irzhi

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

Кстати, научиться веб-дизайну можно также в “Нетологии”, известном центре онлайн-образования. На онлайн-интенсиве “Веб-дизайнер: эффективный сайт от идеи до реализации” за два с половиной месяца.

На онлайн-интенсив я тоже дарю Вам скидку в размере 5%. Просто вбейте промокод “Нетологии” “p151069_irzhi” в специальное поле при оплате обучения.

Нажмите на картинку и узнайте больше

Если Вам нравится профессия верстальщика, но Вы хотите начать с чего-то простого и понятного (но востребованного у заказчиков!), то Вы вполне можете стартовать с вёрстки продающих (целевых) страниц — Landing Page.

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

Хочу отметить, что в последнее время вёрстка лендингов (так кратко называются Landing Page) стала популярна среди женщин, работающих удалённо через интернет. Ведь такая работа не требует много времени и специфических знаний. Но при этом она достаточно творческая и приносит неплохой ежемесячный доход.

Большим плюсом будет, если Вы научитесь делать лендинги с высокой конверсией — от 5 до 34%. Поверьте, не каждая продающая страница может похвастаться такими показателями. Вы можете “прокачать” свои знания в создании эффективных лендингов с помощью уникального учебника “Идеальный Landing Page”. Сейчас 2 главы этого учебника доступны для бесплатного скачивания (скачивайте здесь — irzhitalk.ru/ideal-lp).

Сколько зарабатывает верстальщик сайтов?

Доходы верстальщиков во многом зависят от объема работы и затраченного на работу времени. В среднем верстальщики сайтов берут 5-30$ в час или 50-100$ за проект. Чем опытнее специалист, тем выше ценится его труд.

Каким должен быть верстальщик сайтов?

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

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

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

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

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

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

По материалам книги “24 интернет-профессии, или как работать, не выходя из дома”.

Интересно? Расскажите друзьям!

irzhitalk.ru

Верстка сайта: секреты годной верстки веб-ресурса

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

Как происходит верстка сайта

Для начала разберемся, что такое верстка и зачем она нужна.

Процесс создания сайта происходит в несколько этапов и одним из последних является верстка сайта. Этим занимается соответствующий специалист — верстальщик. Создание веб-страниц происходит с помощью специальных языков программирования: HTML, CSS и JavaScript. Используя возможности этих языков, разработчик превращает созданный в графическом редакторе макет в полноценную интернет-страницу для отображения в браузере. Так выглядит наш блог изнутри:

Верстка осуществляется в несколько этапов:

Из макета вырезаются основные изображения, элементы, фоны и прочее:

1. Прописывается структура сайта с помощью языка разметки HTML. Размечается расположение основных блоков и элементов, проставляются ссылки.
2. Далее элементам придается внешнее оформление с помощью стилей CSS. Задается фон для страницы и необходимых элементов, подгружается типографика, задается цветовая гамма страницы, размещаются изображения из макета.
3. Если на сайте подразумевается динамика, используется JavaScript, с помощью которого создается анимация и другие динамические эффекты.
4. Созданная страница тестируется, проверяется наличие ошибок и отображение сайта в различных браузерах и на других устройствах.

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

Что следует знать дизайнеру

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

1. Подготовка макета к верстке.
2. Использование модульной сетки.
3. Разработка адаптивного дизайна.
4. Создание стайлгайдов.
5. Использование векторной графики.
6. Работа с текстом.
7. Создание анимации.

Остановимся на каждом подробнее.

Подготовка макета: правила и рекомендации для дизайнера

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

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

1. Порядок в слоях

Пожалуй, самое простое правило для дизайнера. Чтобы разработчик не тратил время на понимание, какой слой соответствует тому или иному элементу, лучше навести порядок в слоях. Придумать для каждого слоя осмысленные названия (вместо «Слой 1» — «Кнопка_Шапка» и прочее), распределить слои по группам (например, группа «Хедер», «Футер» и так далее). Также нужно удалить скрытые ненужные слои, так как верстальщик может не заметить и допустить ошибку, разместив элемент на сайте. Соблюдение данных рекомендаций позволяет верстальщику понять логику дизайна и облегчает его ориентирование по макету.

2. Целые числа

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

3. Наличие всех состояний элементов

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

4. Используемые технические характеристики

При работе с графическим редактором, необходимо обозначить нужные характеристики макета: цветовое пространство (RGB, а не CMYK), расстояния в пикселях, разрешение (72 dpi) и прочее.

5. Цветовая гамма

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

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

Использование модульной сетки

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

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

Разработка адаптивного дизайна

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

Наш сайт в декстопной версии:

В мобильной версии:

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

Создание стайлгайдов и других документов

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

Решение данной проблемы простое. Дизайнер может создать документ, в котором будут описаны все используемые типовые элементы на сайте. Кнопки, заголовки, небольшие блоки, веб-формы и прочее будут создаваться в соответствии с документом, что упростит разработку и упорядочит дизайн. Выдержка из стайлгайда Яндекса:

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

Использование векторной графики

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

Работа с текстом

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

Вставляя написанный копирайтером текст, верстальщик может изменить макет до неузнаваемости. Все тщательно просчитанные дизайнером отступы, подобранный кегль может исчезнуть из-за полотна текста. Идеальный вариант — макет, разработанный под конкретный контент. Однако, если написанного текста нет, можно поступить в обратном порядке — дать ТЗ копирайтеру под дизайн. Так обе стороны окажутся в выигрыше.

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

Требуется определенная работа с типографикой. Лучше, если характеристики шрифта будут выражены в целом значении (кегль 12,342 лучше заменить на 12). Также если дизайнер не применяет стандартные веб-шрифты из Google Fonts, лучше приложить используемую типографику к макету (в ttf или других форматах, удобных для разработчика).

Создание анимации

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

Анимацию можно создать в Photoshop или предназначенных для этого программах: Adobe Animate, Adobe After Effects, Principle и прочее.

Другие способы найти взаимопонимание с верстальщиком

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

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

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

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

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

idbi.ru

что это такое? Какие методы верстки бывают и какие программы используются.

Часто возникает вопрос, что такое верстка? Простым языком, верстка – это расположение составных элементов (текста, заголовков, изображений, таблиц) на странице документа. Верстка бывает следующих видов:

• Книжная
• Газетно-журнальная
• Верстка веб-документов

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

Далее, полученный макет нужно отобразить в браузере, да так, чтобы все элементы «ожили» и откликались на действия пользователей. На этом этапе и вступает в работу верстальщик. Используя язык разметки html, он создает документы, которые понимает браузер и отображает их привычными всем веб-страницами.

Методы верстки                             

При верстке веб-страниц можно выделить два основных метода:

• Табличная верстка
• Блочная верстка

Табличная верстка раньше была основной. Преимущество верстки с помощью таблиц заключается в ее простом исполнении и практически одинаковом отображении в разных браузерах. Недостатки – сложная и объемная структура, которая в разы увеличивает количество кода ( по сравнению с блочной). Чтобы изменить табличную верстку нужно затратить большое количество времени и усилий, долго вникать в уже существующую структуру.

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

Блочная верстка является основной в среде веб-разработчиков. В блочной верстке каркас документа состоит из тегов <div>. Главным ее преимуществом является концепция семантической верстки, т. е. разделение содержимого и оформления.

Небольшой пример кода: 

Табличная верстка

<table border=»0″ cellspacing=»0″ cellpadding=»0″>
<tr colspan=»2″>
<td colspan=»2″>Шапка</td>
</tr>
<tr>
<td>Контент</td>
<td>Меню</td>
</tr>
<tr colspan=»2″>
<td colspan=»2″>Подвал</td>
</tr>
</table>

Код блочной верстки

<div>Шапка</div>
<div>
<div>Контент</div>
<div>Меню</div>
</div>
<div>Подвал</div>

Результат получается одинаковый:

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

Программы для верстки

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

• Notepad++
• Macromedia Dreamweaver
• Microsoft FrontPage
• CoffeeCup HTML Editor
• NetBeans
• Coda

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

 

Какие проблемы возникают при верстке?

Основная проблема при верстке сайтов – не одинаковое отображение одного и того же документа в разных браузерах. Сверстав качественно страницу для Firefox, она может отображаться немного по-другому в Opera, и полностью разъехаться в Internet Explorer.

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

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

ac-u.ru

Проверяем качество сайта / Habr

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

Что мы будем тестить?

Тестить мы будем следующие моменты:

• Верстку
• Программировине
• Безопастность

Верстка

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

Ну и еще можно проверить в:

Если лень грузить браузеры и тыкать по ссылкам, то можно сие действо и автоматизировать, для этого есть специальные сервисы:

• http://browsershots.org/ — бесплатный сервис, куча браузеров. Вводите адрес сайта, и его ставят в очередь на проверку, ваша очередь придет примерно через час, но проверяется только одна страницы, и одно разрешение экрана, так что если хотите проверить все страницы при разных разрешениях – запаситесь терпением… нечеловеческим терпением… После проверки получите ссылки на ваши скриншоты.
• http://ipinfo.info/netrenderer/ — Проверяются только разные версии Internet explorer’a. Никакого ожидания, скрин выдается сразу. Сервис бесплатный.
• http://www.browsercam.com/ — Сервис довольно крутой. Можно проверять сразу 10 url’ов, можно указать до какого уровня вложенности страниц проверять, а можно проверить сайт целиком. Можно даже переход на поддомены указать. В общем у этого сервиса есть все, наверное потому он и не бесплатный (около 100 баксов в месяц).

Вообще, таких сервисов в сети куча, стоит только спросить у гугла…
2. Валидность верстки.
Сейчас много говорят, о том, нужна ли валидность верстки. В основном приводят в пример google, типа «Если уж гугл свой сайт сверстали забив на валидность, то что нам простым смертным остается…». Если присмотреться к коду google.com, то… знаете, я бы такого верстальщика на работу не взял… оформление и разметка – вперемешку, тип документа неуказан, таблица стилей не вынесена в отдельный файл…. На FrontPage’е они верстают что ли… В общем, это все со знаком минус, а на минусы ровняться не стоит. Про важность валидации можно говорить много, и можно привести кучу доводов показывающих важность валидации, и все эти доводы можно оспорить, кроме одного:
Профессиональный верстальщик никогда не позволит себе не валидный код, а хорошая студия не возьмет верстальшика, верстающего «как попало».
Проверить валидность верстки сайта можно тут:
http://validator.w3.org/

Программирование

Оценить работу программиста, программистом не являясь, мягко говоря, сложно, и все же я дам несколько советов, что бы вы могли иметь некое представление об уровне программера, работающего с вашим проектом.
1. ЧПУ
Или Человеку Понятный УРЛ. Посмотрите внимательно в адресную строку браузера, там не должно быть никаких «?», «=», “&” и прочей фигни, только буквы! То есть, например если у вас на сайте есть новости, то адрес на страничке новости должен быть не таким
ваш_сайт.ru/news.php?cat=last&id=451,
а что то вроде:
ваш_сайт.ru/news/last/451
Согласитесь, второй вариант, как минимум, приятнее для глаз, и я думаю любой хороший программист, если ему будет не лень (а раз мы ему платим, значит лень ему быть не должно), может и должен реализовать в вашем проекте ЧПУ. Кроме того, что это все приятно для наших с вами глаз, это приятно и для глаз поисковиков.
2. AJAX
Аякс, это красиво, удобно, популярно и современно. Но помните, перебарщивать AJAX’ом нельзя, его нужно использовать только там, где он действительно полезен. Впрочем, где использовать AJAX, а где нет, к программированию не относиться, зато к программированию относиться сама реализация… Я, как программист, скажу, что самый большой наш порок – это лень вкупе с пренебрежением к пользователям. Если в вашем проекте используется AJAX, убедитесь что при динамической подгрузке данных, пользователь информируется о том, что на сайте что то происходит. Может быть у вас в офисе и стоит десятимегабитная выделенка, но у многих пользователей интернет горзадо медленней, и при щелчке на ссылку, пользователь может и не понять, что что-то грузиться, надо бы ему об этом рассказать.
3. CMS
Если на сайте используеться система управления контентом, а так чаще всего и бывает, и если эту систему писал ваш программист, убедитесь, что вы понимаете, как работает система, и при необходимости, сможете работать с ней сами. Видел я одну cms, где странички создавались путем вбивания нужных значений в таблицу mysql через phpmyadmin. Управление вашими сайтами, должно быть для вас совершенно понятным, ибо программисты приходят и уходят, а сайт остнется.

Безопасность

Говорят, что только самые лучшие программисты, могут стать хакерами (ну или как принято говорить «Консультантами по IT безопасности»), так что не рассчитывайте, что сможете сами проверить сайт на уязвимости, прочитав эту статью, однако пару рекомендаций я вам дам.
1. SQL уязвимости
Пожалуй, самая распространенная ошибка программистов. Вечно мы забываем проверить переменную, перед тем, как использовать ее в sql запросе. Суть уязвимости в том, что бы изменить передаваемую скрипту переменную так, что бы sql запрос выдал не то что должен, а то что нужно хакеру. Проверить переменную на на безопасность довольно просто, достаточно вставить в нее символ «’».Допустим у вас url
ваш_сайт.ru/news/last/451
Попробуйте изменить его на:
ваш_сайт.ru/news/last/4’51/
И если вылетит ошибка типа
Warning: Supplied argument is not a valid MySQL result resource…
Или что нить в этом роде – урежте зарплату программисту, если вместо новости с идентификатором 451 вылезет новость с идентификатором 4, тоже ничего хорошего. Апострофы стоит повставлять не только в url’ы но так же и во все input и textarea поля на сайте, короче говоря, везде, куда пользователю разрешено вводить текст.
2. Загрузка файлов
Если пользователь может загружать на сайт файлы (фотографии, документы), нужно проверить, какие именно файлы разрешены к загрузки, и если тип загружаемого файла не проверяется, считайте что ваш сайт взломан.
3. Остальные
Хотел сейчас написать про xss уязвимости, и понял, что не могу выразить свои мысли словами, доступными людям, не разбирающимся в IT безопасности. Поэтому все же посоветую использовать для проверки сайта на уязвимости специального человека, или специальный софт. Я бы посоветовал XSpider (http://www.ptsecurity.ru), правда это обойдется вам от 9000р в год. Есть и бесплатные утилиты, менее надежные, но все-таки бесплатные.

Еще

Ну и так в бонус, есть неплохой сервис
http://webo.in/
Который скажет вам насколько ваш сайт быстро грузиться, и что можно предпринять для ускорения его загрузки… это так, если захочется наказать программиста…

habr.com

Верстка сайта – что это такое?

Здравствуйте, дорогие друзья!

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

Навигация по статье:

Верстка сайта – что это такое?

Вёрстка сайта – это процесс создания веб страницы с использованием специальных языков разметки и программирования.

Например, если у Вас уже есть готовый дизайн в PSD или другом графическом формате, то его нужно «оживить» — превратить из статической картинки в живой сайт, на котором можно читать и копировать текст, переходить по ссылкам, открывать меню, вызывать всплывающие окна и так далее.
Для вёрстки сайта используются:

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

CSS – каскадные таблицы стилей, которые позволяют задать оформление для всех ранее свёрстанных на HTML элементах страниц. При помощи CSS задаются размеры, цвета, расположение, форма элементов, создаются эффекты при наведении и делается адаптация под мобильные устройства.

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

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

Какие бывают типы вёрстки сайта?

На сегодняшний день можно выделить:

• Табличную
• Блочную
• Семантическую
• Резиновую
• Адаптивную
• Вёрстку слоями

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

Как делается вёрстка сайта?

Для того чтобы сверстать сайт достаточно открыть текстовый редактор Блокнот, написать в нём код и сохранить в формате .html. Далее если вы откроете свёрстанную вами страницу в браузере то увидите своё творение в рабочем состоянии. Однако такой способ очень неудобен и малоэффективен.

На сегодняшний день используются такие способы вёрстки:

1. 1.При помощи специальных редакторов кода, такие как Notepad++, Sublime Text, Atom, Coda и другие. Их преимуществом является то что там реализована подсветка кода, то есть все название тегов, классов, свойств, значений выделены разными цветами и вам значительно легче ориентироваться в таком коде + если вы написали какой то тег с ошибкой, то подсветка для него не сработает и вы увидите что с ним что то не то и нужно искать ошибку именно там. Так же для таких редакторах есть множество различных дополнений для работы с файлами по FTP прямо на хостиге, сохранения и быстрой вставки заготовок кода и так далее.

   Этот способ используют большинство веб-разработчиков, так как он наиболее надёжный.

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

   Примеры визуальных конструкторов:

   • Adobe Muse
   • Creato
   • Mobirise и другие.
   
3. 3.Онлайн визуальные конструкторы. Принцип их работы такой же, как и рассмотренных выше, но их не нужно устанавливать на компьютер. Достаточно зарегистрироваться в одном из сервисов и можно уже создавать свою первую веб-страницу.

   Наиболее популярные визуальные конструкторы:

   • Wix
   • Тильда
   • Flexbe
   • Umi и другие.
   
4. 4.Редактирование готовых шаблонов. Это не совсем вёрстка, но такой вариант тоже используется. Допустим вы хотите создать сайт с определённым внешним видом на одной из популярных CMS. Вы можете подобрать наиболее подходящий по внешнему виду готовый шаблон, а затем переделать и доработать его. Для редактирование файлов шаблона лучше использовать редакторы кода, рассмотренные в первом пункте. Разумеется, что для реализации данного способа нужны знания HTML, CSS хотя бы минимальные знания PHP, JavaScript и файловой структуры шаблона используемой CMS.

На этом у меня всё! Если вам тоже есть что сказать по этой теме или какие-то вопросы остались непонятными – оставляйте свои комментарии!
Успехов вам везде и во всём!

С уважением Юлия Гусарь

impuls-web.ru

Как получить хорошую верстку от верстальщика / Habr

Вводная часть

Прошлый мой материал “Краткая инструкция по работе с web-дизайнером (для менеджера проекта)” вызвал неоднозначные отзывы и отличную ответную статью (взгляд с другой стороны) “Краткая инструкция о том, как надо работать с web-дизайнером (взгляд дизайнера)”.

Прочитав обе статьи, вы сможете составить адекватное собственное мнение на заданную тему.

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

Backend

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

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

Работа до верстки

Да, я знаю, что идеальный дизайнер разбирается во всех тонкостях верстки, что и как нужно делать в макете, чтобы верстальщик остался доволен. Но такие люди попадались мне очень редко. Здесь описывается работа с “обычным” дизайнером.

Работа с макетом

1. Стоит попросить дизайнера прочитать краткую инструкцию на сайте ilovepsd.ru. Особенно разделы касательно группировки слоев, нэйминга слоев, способа указания размеров и применения эффектов к объектам.
2. Хорошо зарекомендовал себя прием, когда все размеры объектов ( без фанатизма) кратны двум.
3. Стоит заранее определить размеры рабочей области сайта вместе с дизайнером и четко их обозначить. Иначе вы рассчитывали на одно, получили третье.
4. Заранее предусмотрите в макете, какие элементы будут у вас на сайте, например, какие списки, таблицы или цитаты. Иначе после верстки вы будете просить верстальщика “Ну сделай таблицу посимпатичнее на свой вкус”.
5. Для активных элементов в макете должно быть предусмотрено состояние активное и не активное.

Тут встречаются два подхода — сделать все в одном макете, но активные состояния скрыть, или два разных PSD файла. Мы предпочитаем первый вариант. Меньше шанс, что-то забыть или пропустить. Меньше надо открывать и смотреть.

Работа со шрифтами

1. Всегда забирайте шрифты вместе с макетом.
2. Не каждый шрифт можно легко использовать в WEB. Никто лучше самого верстальщика вам в этом не поможет разобраться. Заранее уточните у него этот момент.

Последнее время мы все чаще просим дизайнеров использовать бесплатные шрифты из набора Google Fonts.

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

Консультация

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

Работа во время верстки

Версии браузеров

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

Если вы без понятия для чего это нужно, то попросите поддерживать Chrome, Firefox, Opera, Explorer от 8 версии.

Чем проверять верстку

1. Лучшая проверка — это ваш браузеры. Открывайте макет во всех этих браузерах и смотрите.
2. Стоит открыть макет на мониторах разного размера. Удобное приложение для Chrome если у вас нет 10 разных мониторов Resolution Test

W3C Validator

Единицы сайтов могут пройти 100% валидацию. И почти никогда добиваться 100% валидации нет оправданного смысла. Но, если верстальщик не может вам внятно объяснить и назвать причину почему именно в этом месте валидация не проходит — это первый звонок. На это стоит обратить внимание.

Валидатор здесь — http://validator.w3.org

JavaScript

Любое применение JavaScript должно быть обоснованно и там, где это использование можно заменить на HTML+CSS — стоит заменять. Особенно важно это для отображения контента. На данный, момент наши эксперименты показывают, что поисковики не всегда и не везде могут внятно и адекватно проиндексировать контент, генерируемый с помощью JavaScript. Каждое такое применение должно быть обоснованно и у него должна быть причина.

Пиксель в пиксель

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

Мобильные платформы

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

habr.com