Мир гаджетов и новейших технологий. Веб дизайн верстка сайта


Веб дизайн: html | maximsoldatkin.com

Стоит ли для работы в веб-дизайне изучать html/css и заниматься версткой?

У меня есть для вас два примера.

Эти две картины (рис.1) нарисованы только карандашом, они черно-белые, выполнены в определенной стилистике. При их рисовании использовался один лишь инструмент – карандаш. И они обе прекрасны. То есть пользуясь только одним инструментом можно делать удивительные вещи.

Рис.1 Рисунок карандашом

И знания html/css это такой же инструмент. Во-первых, дизайнер html/css – это инструмент, во-вторых дизайнер интерфейсов создает взаимодействие. Картинки давно уже недостаточно.

О чем я говорю? Сейчас поясню.

В веб дизайне html и css даст вам понимание анимации, например (рис.2). То есть в последних версиях css есть такая функция как transition. Важно знать, что такой инструмент существует и можно таки вещи делать с его помощью. Если вы не знаете его, то вы соответственно ограничены в картинках и можете делать только статичные переходы.

Рис.2 Анимация http://css3.bradshawenterprises.com/transitions/

Кстати, рекомендую посмотреть прямо сейчас:

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

Frontend frameworks

Есть еще фрэймворки. Так называемые frontend frameworks. Самый популярный – это bootstrap. Я тоже покажу что это такое. В двух словах – это набор компонентов, которые уже можно использовать в вашем сайте. То есть они с разными размерами, они работают определенным образом. Этот набор компонентов можно давать верстальщику и он на основе этих компонентов уже все собирает. Это все упрощает, то есть вместо того, чтобы придумывать эти вещи самому, можно взять готовые и их использовать. Самые популярные getbootstrap, foundation, pure, semantic и т.д. (рис.3,4).

Рис.3 Frontend frameworks

Рис.4 Frontend frameworks

Есть анимационные фрэймворки (рис.5). Мы можем тоже брать готовые элементы и на их основе создавать какие-то вещи. Мы можем что-то крутить, что-то двигать, что-то заполнять цветом, двигать под углом, двигать с искажением, увеличивать. Все это дает нам новые возможности для выражения. Одно дело мы просто нажимаем кнопочку в интерфейсе, другое дело когда у нее есть какая-то дополнительная анимация. Конечно с этим стоит быть действительно аккуратным и внедрять только, когда это важно и нужно.

Рис. 5 Animation frameworks

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

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

Рис. 6 Схема с верстальщиком

Рис. 7 Люфт

Дизайн веб-сайта на html/css

Если есть хороший технолог. (рис.8) Это человек, который не просто странички верстает по блокам, а человек который очень глубоко понимает и знает техническую часть, разбирается лучше вас, он сам готов что-то предложить. Когда есть технолог в команде — это большой плюс. Он сделает не просто базовые вещи, он сделает гораздо лучше, приятнее, он что-то доработает и таким образом, результат получается намного выше.

Рис. 8 Схема с технологом

Технолог – это ваш рычаг (рис.9). Гаечный ключ, который вы можете подбирать в зависимости от задачи.

Рис.9 Рычаг

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

Рис. 10 Схема дизайнер-технолог

Существует софт , который позволяет работать дизайном веб сайта на html/css без знания кода (рис.11): Adobe Muse, Adobe Edge Animate, Macaw, Webflow. Есть курсы по этим программам, соответственно изучайте и пробуйте.

Рис.11 Программы для работы дизайном сайта на html/css без знания кода

В итоге, нужно ли знать html в веб дизайне? Нет.

Дизайнер не должен верстать, но знать и понимать как страницы строятся (html/css), понимание framework – это да, потому что дизайнер должен разбираться в том материале, с которым работает.

Узнайте больше по профессии веб дизайнера в моем бесплатном мастер-классе.

maximsoldatkin.com

обучение верстке сайтов с нуля

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

С чего начинается верстка?

Верстка сайта — это описание программным кодом его визуальной составляющей. При этом сайт должен выглядеть и работать корректно на любом браузере (быть кросс-браузерным). Обучение верстке сайтов с нуля должно начинаться с самостоятельного создания PSD-макета, несмотря на то, что его, по идее, должен создавать веб-дизайнер.

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

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

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

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

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

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

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

Инструменты для создания макета сайта

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

Есть люди, которые работают только с векторной графикой и используют для создания макетов Adobe Illustrator.И еще один редактор, который я не пробовал, но который, по слухам, представляет вполне достойную альтернативу вышеперечисленным, — это Sketch, но он работает только под Mac OS.

Знакомимся — HTML

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

Самый элементарный веб-ресурс — это не более чем набор HTML-страничек. Если сайт статический, то после верстки вы фактически получите его окончательную версию, а не просто шаблон. Сейчас такие сайты, естественно, являются большой редкостью. Все современные веб-странички генерируются динамически, при помощи некой серверной логики, которую вы либо напишете сами, либо будете использовать готовую с помощью какой-либо CMS (системы управления содержимым).

Без этой серверной логики были бы невозможны большинство онлайн-сервисов, которые мы используем каждый день и к которым так привыкли. Что касается HTML, то это совершенно несложный язык.

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

Совершенствуемся — CSS

Как только вы освоите основы HTML, можете сразу приступать к изучению CSS (каскадных таблиц стилей), которые позволяют задавать шрифты, цвета, расположение отдельных блоков сайта.

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

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

Обязательно ли учить все тэги, атрибуты и свойства HTML/CSS?

В HTML много разных тэгов и атрибутов, а в CSS — свойств, которые могут иметь различные значения. Поэтому многих новичков волнует вопрос: с чего начать верстку сайта и нужно ли заучивать наизусть все эти значения, тэги и свойства?

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

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

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

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

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

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

Упрощаем процесс верстки

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

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

Высший пилотаж — JavaScript

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

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

Подведем итоги

Итак, как вы уже, надеюсь, поняли, верстальщик — это очень важная и древняя Интернет-профессия, от которой зависит:

скорость загрузки сайта;

адекватность его отображения в различных браузерах;

адаптивность под различные пользовательские экраны;

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

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

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

До новых встреч, уважаемые коллеги и те, кто только вступает на эту нелегкую, но очень увлекательную тропу веб-разработки!

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

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

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

PSD to HTML

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

Получить

webformyself.com

Основы верстки сайтов – принципы, которые нужно знать

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

Азы верстки

Если вы полный новичок в сайтостроении и мечтаете когда-то сверстать свой первый шаблон сайта, то начинать нужно строго с макетов на чистом HTML и CSS. Это наиболее простые веб-технологии, которые можно изучить. Основы верстки сайтов – это именно знание этих двух языков, без которого дальше продвигаться нет никакого смысла.

Изучив их, находите в сети бесплатные PSD-макеты и пытайтесь из них верстать сайт. Стоп. Что такое PSD-макет? Шаблон сайта, нарисованный дизайнером в фотошопе. Соответственно, вам понадобиться фотошоп или его бесплатный, но менее функциональный аналог – GIMP. В этой программе тоже можно работать с макетом. Вам нужны базовые знания работы со слоями. Их можно получить буквально за пару часов, посмотрев пару видеороликов о работе верстальщика с макетом. Их можно бесплатно найти на Youtube.

Рис. 1. Мастером фотошопа можешь ты не быть, но вырезать слои обязан.

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

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

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

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

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

Что нужно знать о верстке сайтов

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

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

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

Рис. 2. Это правильно отформатированный код, который приятно читать и изменять. Если вам не нужно его редактировать, можно сжать все в одну строку.

Использование актуальных тегов. Если вы учили HTML 10 лет назад, то наверняка помните теги, которые сегодня практически не используются или вовсе более не поддерживаются. Ни в коем случае не стоит использовать их, потому что в новых браузерах будут возникать ошибки. Например, frame или object — старые неудачные эксперименты, которым давно есть более удачная альтернатива.

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

Придерживаться стандартов Web 2.0. Это такая концепция, которая стремиться сделать веб-стандарты наиболее простыми, удобными и понятными. Так, она требует разделять содержимое, представление и поведение (HTML, CSS и JS) друг от друга. Это означает, что использование внутренних таблиц стилей приветствуется все меньше и меньше, встроенные в HTML скрипты и стили не поддерживаются концепцией Web 2.0, которая содержит в себе много других дополнительных моментов. Подробнее можно посмотреть на сайте W3C.

Кроссбраузерность, насколько это возможно. Как мы уже сказали, нужно использовать новые свойства и теги. Беда в том, что не все из них везде поддерживаются. Еще хуже, если они поддерживаются по-разному. Некоторые свойства поддерживает только Google Chrome, другие – Safari, третьи – Mozilla. Постарайтесь не использовать те из них, которые поддерживаются исключительно в одном браузере. Делать это можно, только если нет серьезного ущерба кроссбраузерности. Добавляйте вендорные префиксы или автоматизируйте этот процесс с помощью autoprefixer.

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

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

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

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

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

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

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

Верстка сайта для начинающих

Прямо сейчас научитесь верстать сайты с нуля.

Смотреть курс

webformyself.com

что это такое, с чего начать работу с ней, и что для этого нужно

Есть проблемы с ранжированием, проект не растет, хотите проверить работу своих специалистов по продвижению? Закажите профессиональный аудит в Семантике

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

Верстка веб-сайтов – это создание полноценной html-страницы на основе разработанного в графическом редакторе дизайна.

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

Что нужно знать для верстки сайтов? Как минимум, основы работы с графическими редакторами (Photoshop, Gimp, Krita), язык HTML, CSS, библиотеки Java Script (JS).

Если мы нажмем в браузере правую кнопку мыши и выберем «Просмотреть HTML-код», то увидим следующее:

Это и есть сверстанная веб-страница.

Виды верстки

Верстку можно поделить на два основных вида:

  • Табличная. Для описания элементов применяются таблицы. Вся страница представляет собой скопление таблиц <table>. В настоящее время такая верстка считается устаревшей.
  • Блочная. HTML-документ представлен как совокупность блоков <div>.

Верстка сайта: с чего начать

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

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

  • Вырежите иконки, кнопки, картинки. Сложите графику в отдельную папку.
  • Выпишите шрифты, которые необходимо будет отразить в CSS.
  • Создайте файлы index.html и styles.css (можно назвать их по-другому). HTML – это будущая сверстанная страница сайта, CSS – файл стилей.
  • Начинайте с шапки. Пропишите базовые элементы в теге head файла HTML. Здесь следует указать кодировку, путь к таблице стилей, title и т.д.
  • Стратегия верстки. С левого угла дизайн-макета по диагонали вниз начинайте описывать страницу. Сначала «одевайте» в HTML шапку сайта (слева направо), потом спускайтесь ниже и заканчиваете переносом в код правой нижней части макета. Вы можете нарушить данное правило и производить верстку так, как вам удобно.
  • Сначала верстайте структуру веб-страницы в HTML. Затем в CSS выносите идентификаторы и классы. Это можно делать параллельно с версткой. Каждый класс должен иметь адекватное название, которое дает понимание, что он означает. Смешно и непрофессинально выглядят названия типа «verh_shapki», «cherny_shrift_konec» и т.п.
  • Закрывайте все теги, проверяйте правильность их вложения.
  • Работа над HTML заканчивается, и верстальщик полностью переходит на работу с файлом стилей: дополняет его, дорабатывает и т.п.
  • Стилизация выполняется в определенном порядке. Сначала элементу задаются общие правила (фон блока, отступы), затем специфические свойства типа цвета рамок, размещение картинок внутри блока и т.п..
  • Возвращайтесь обратно к HTML-файлу, если странице необходима динамика. Для этого предусмотрены JavaScript-библиотеки. Например, можно сделать меняющийся слайдер или адаптивное меню. Код библиотек должен быть минимизирован.
  • Тестирование и проверка на ошибки. Проверьте, как ведет себя страница в разных браузерах при разных разрешениях монитора. Можно пользоваться онлайн-сервисами или специальными инструментами типа
  • Изучите страницу на валидность – отсутствие ошибок в коде.

Какая верстка считается качественной

  • Блочная – с применением<div>.
  • Адаптивная. кроссбраузерная – страница ведет себя корректно в разных браузерах и на мобильных гаджетах.
  • Валидная – без ошибок в коде.
  • Текстовая. То, что можно сверстать в виде текста,не верстается картинкой. Поисковая система любит текстовый контент, поэтому данный факт должен учитывать каждый верстальщик.
  • Код минимально короткий, все стили вынесены в отдельный файл.
  • Все содержимое в html и css прописано строчными буквами.
  • Для тега <img> (картинки) обязательно указаны высота и ширина изображения.
  • CSS используется преимущественно. То есть, если можно обойтись без JS - то динамика описывается в CSS.
  • То же самое для картинок. Если спецэффекты для шрифта можно наложить при помощи CSS, то используется текст, а не картинка.
  • JS файлы подключены в низу кода. Если вы подключаете их в<head>, то это плохо сказывается на скорости загрузки веб-страницы.
  • JS файлы объединены в один (по возможности).
  • Навигация по сайту реализована списками (<ul>, <li>), поисковая система быстрее понимает такую навигацию.
  • Правильная работа с заголовками. Чтобы у SEO-специалиста в будущем не было проблем, указывайте h2-H6 только в контентной части сайта. Размещайте заголовки по принципу: первым идет h2, потом по убыванию другие виды заголовков.
  • Продуманы стили всех заголовков, абзацев, картинок, списков в контентной части документа.
  • Структурированный код, который наглядно показывает все закрывающие и открывающие теги.

Инструменты верстальщика

  • Обработка изображений: Adobe Photoshop, Gimp, Krita.
  • Работа с кодом: Notepad++, Adobe DreamViewer, SublimeText, CoffeeCup HTML Editor, UltraEdit,Firebug, Winless, CSS3 Generator
  • Работа с JS: Front Page, NetBeans.
  • Проверка на кроссбраузерность и валидность: Crossbrowsertesting, IE Tester, Dr Watson, Validator.w3, Css validator, Markup validtor.

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

semantica.in

Верстка сайта. Урок 1

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

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

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

При создании сайтов в идеале участвуют 3 человека. Веб-дизайнер — рисует сайт, человек с фантазией и со знанием фотошопа и т. д. Мне не дано стать дизайнером это точно.

Верстальщик следующий человек с меньшим багажом знаний фотошопа и фантазии. Отлично знает html, css, javascript и т. д.

Веб-разработчик/Веб-программист — человек с отсутствием фантазии и фотошопа))

Вот моя таблица — участника создания полноценного сайта

Веб-дизайнер

Верстальщик

Веб-программист

Знает фотошоп

+

+

-

Есть фантазия

+

±

-

Знает языки разметки

-

+

+

Знает языки программирования

-

±

+

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

Теперь давайте о необходимых знаниях, софте и т. д.

Минимум знаний для начинающего верстальщика:

  • основы html и css – так как мы только начинаем, то базового уровня должно Вам хватить. (Мы будем рассматривать язык разметки HTML!)

  • Базовое знакомство с фотошопом/photoshop’oм — так как придется смотреть на задумки веб-дизайнера и воплощать в коде.

  • Желание и упорство — главное все делать с душой. Под плеткой никто не чему не научится.

Мой софт верстальщика

Еще один важный момент верстальщика — его софт/программы.

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

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

  • Notepad++  по-моему лучшая альтернатива Notepad – Блокноту. Для начинающих особо рекомендую: помогает набить руки для набора и для быстрого набора. Программа бесплатна. Я проводил сравнения Notepad и  Sublime text, сейчас пользуюсь последним.

  • phpDesigner (любая другая IDE, например, webStorm) – платная программа для программирования, отлично подойдет для верстки сайтов. Основные плюсы- это удобность использования, много настроек и функций, а также подсветка кода: ошибок, выделение текущего фрагмента и т. д. Программа платная.

  • Еще сотни других программ о которых в принципе говорит не стоит, так как каждый выбирает для себя. Посмотрите в гугл по фразе «Текстовый редактор», «html/css/php редакторы» и т. д.

  • А также оочень важный момент — актуальные браузеры. По этой теме будет отдельная статья плюс расскажу о софте для браузеров.

Ну и на последок, хорошие ресурсы по данной теме.

Htmlbook.ru – наверное самый/один из самых полезных ресурсов по html и css. Если Вы начинаете, то однозначно необходимо начинать с этого ресурса.

validator.w3.org сервис проверки Валидности html кода.

jigsaw.w3.org/css-validator css валидатор.

Что и где читать будет в отдельном посте.

И в принципе, никто google и yandex не отменял

с/у  УтБ

На десерт видео – примерно так я устаю от верстки:)

www.gtalk.kz

Верстка для веб дизайнеров | Блог о веб программировании

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

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

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

Удобный циклический процесс разработкиНа практике, готовый дизайн не должен всегда быть окончательным вариантом. Я имею в виду, что он должен быть гибким, чтобы его можно было менять и адаптировать под технические ограничения системы без утраты его изначальной сущности. Такие многократные и неизбежные изменения могут осуществляться только самим дизайнером. Дизайнер/разработчик в одном лице может вносить необходимые изменения гораздо быстрее, чем если бы разработчику приходилось повторно отсылать макет дизайнеру, который, к тому же, редко находится в пределах досягаемости, чтобы внести изменения. К тому же, в такой ситуации могут возникать — и часто возникают — трения между дизайнерами и разработчиками.

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

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

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

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

Однако, у такого сценария, когда дизайнер занимается версткой своих инноваций, есть и недостатки.

Как написал Лукас Мэтис (Lukas Mathis) в одной противоречивой статье на нашу тему под названием «Дизайнеры — не программисты» [1]:

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

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

ЗаключениеУчитывая все сказанное, объем разрабатываемого проекта может, в конечном итоге, определять роли, которые отводятся в нем дизайнеру и разработчику. Небольшое приложение может с успехом контролировать менеджер проекта [2], в то время как обширной системой, определенно, должен управлять специализированный персонал!

world-blog.ru

Компьютерная верстка сайта и веб-дизайн

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

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

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

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

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

metadevice.ru