Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

Куда пойти учиться!?

Чулан
Господа,

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

Чему хочется научиться: фотошоп(другой редактор для создания макетов), сопряжение размеров, перенос макета в хтмл-код с участием CSS, если возможно применение яваскрипт.

Заранее спасибо!
Всего голосов 11: ↑9 и ↓2 +7
Просмотры 337
Комментарии 13

Обращение к дизайнеру

Чулан
— Дизайнер! Каждый раз создавая новый макет и отдавая его верстальщику/программисту/шаману убедись, что ты не допустил следующего:

1. Если у Вас в макете фон, либо какой-то другой цельный элемент дизайна, состоит из «двадцотьпятыщмильон» слоёв — пожалуйста склей их в один слой, ведь кому как не тебе знать лучше какие слои относятся к этому элементу, не нужно взрывать мозг другим людям своей уникальностью.
2. Соблюдайте порядок в слоях, ведь именно для вас компания Эдоби(Adobe) придумала все возможные папочки, маркеры и так далее.
3. Если вы делаете дизайн сайта, то прежде чем отдать его на вёрстку покажите людям как должен Ваш макет отображаться на разных разрешениях. Сделать это легко … просто измените размеры Canvas’a… честно-честно.

p.s ппнх, кросс-пост с блога

Под катом джыпег того как делать — не нужно!
Читать дальше →
Всего голосов 24: ↑19 и ↓5 +14
Просмотры 305
Комментарии 20

Демо-данные для интернет-магазинов или верстаем правильно

Разработка веб-сайтов *
Не многие разработчики наполняют сайт реальными, или похожими на них, данными. В большинстве случаев все заканчивается созданием категорий Тест1, Тест2… и товаров Товар1, Товар2… Естественно, это не может отразить/показать настоящее поведение сайта/шаблона. Если с товаром еще не всегда все плохо, то с категориями почти всегда что-то не в порядке.
Читать дальше →
Всего голосов 43: ↑32 и ↓11 +21
Просмотры 29K
Комментарии 29

Веб-дизайнер vs верстальщик. Разделение труда, или когда нужен менеджер проекта (из истории одного стартапа)

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

image

Статья может представлять определённый интерес для заказчиков веб-услуг (владельцев сайтов / бизнесменов, желающих открыть собственный стартап). Материал также может послужить полем для обсуждения всеми сторонами вопроса — веб-дизайнерами, проектными менеджерами, верстальщиками, владельцами сайтов. В статье рассказывается о процессе проектирования и разработки веб-дизайна (с логическими схемами) стартапа, о наблюдении за реализацией и последующей «жизнью» проекта и об итоговом его закрытии. Не наделённая достаточной информацией по объективным причинам закрытия данного стартапа, я постараюсь избежать домыслов, пересудов и необоснованных выводов. Цель моего рассказа — отразить взгляд со стороны веб-дизайнера на реализацию его дизайна на сайте. Статья содержит практические советы по контролю качества вёрстки.
Читать дальше →
Всего голосов 13: ↑7 и ↓6 +1
Просмотры 36K
Комментарии 46

Логотип по стандартам HTML5 или Как поставить векторную картинку на веб-страницу

Разработка веб-сайтов *Обработка изображений *
Из песочницы
Tutorial
Рисуем логотип
20-летнему юбилею тега IMG посвящается
25 февраля 1993 года Марк Андрессен (Marc Andreessen) написал:
Предлагаю новый опциональный HTML-тег: IMG
При нем должен обязательно указываться аргумент SRC=«url».
Тег отсылает к файлу растрового изображения (bitmap или pixmap). Браузер будет запрашивать этот файл в Сети, распознавать как изображение и вставлять в текст сообразно месту тега в коде страницы .


Допустим, вы нарисовали в Corel Draw! логотип компании и собираетесь разместить его на сайте не как-нибудь, а формате HTML5. И, соответственно, размещать картинку не в растровом формате, а в .SVG

Зачем мне картинка в SVG?


Что это дает, понятно – при любом масштабировании на планшете или любом другом гаджете мы имеем идеально точно отрисованную картинку, насколько детализированной она бы ни была.
Читать дальше →
Всего голосов 17: ↑14 и ↓3 +11
Просмотры 27K
Комментарии 30

Удобный генератор CSS спрайтов

Я пиарюсь
Каким должен быть инструмент, чтобы в нем было удобно создавать и редактировать CSS спрайты? У каждого будет свой ответ на этот вопрос, а я всего лишь поделюсь своими соображениями и продемонстрирую свой генератор спрайтов.

По большей части моя работа со спрайтами сводилась к следующему:

Итак, начнем с самого начала
Всего голосов 12: ↑10 и ↓2 +8
Просмотры 9.1K
Комментарии 8

Распространенная ошибка верстки: тестируем горизонтальную прокрутку

Разработка веб-сайтов *CSS *
Эта ошибка крошечная и незаметная, но все же, это ошибка. Она присутствует на чудовищном количестве сайтов, в т.ч. на Хабрахабре.

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

Читать дальше →
Всего голосов 20: ↑11 и ↓9 +2
Просмотры 16K
Комментарии 28

Pixel perfect верстка

Разработка веб-сайтов *HTML *
Я веб-разработчик с опытом работы 2 года, работаю в firefox с firebug. Верстаю по технике Pixel-perfect. Почему?

  • Быстрее создается страница, чем когда бегаешь между браузером и PSD.
  • Гораздо качественнее получается результат, от чего и ваш клиент в восторге аж придраться не к чему.
  • Банально удобнее видеть макет и тут же позиционировать элемент под ним.

Раньше я размещал изображение Html кодом. Но как неудобно выделять элемент в firebug-е если поверх всего лежит изображение. Приходилось каждый раз лезть в стили и прятать картинку. Pixel-perfect plugin для firefox почему-то не работал.
Тогда появилась идея создать скрипт, который будет прятать по short-cut(hotkey)-ю изображение. И пока создавал скрипт появлялись новые идеи для модернизации удобства использования. В итоге получился: Pixp

После создания я смог его протестировать только на одном живом проекте, так что возможны баги, ну и так как это мой первый публичный проект для всех, прошу строго не судить. Однако прошло уже не мало времени как я ушел в back end, а мои друзья верстальщики продолжают работать используя данный скрипт.
Лично для меня процесс верстки стал гораздо удобнее. И доказывать клиенту что этот элемент расположен правильно, теперь не составляет труда. Так как ваш клиент также может использовать скрипт, не устанавливая доп. ПО.
Читать дальше →
Всего голосов 56: ↑35 и ↓21 +14
Просмотры 113K
Комментарии 53

Простое правило выбора CSS селекторов

CSS *HTML *
Tutorial
Я хотел написать комментарий к статье о том куда отправляются хорошие верстальщики, но мне стало лень. А потом опять стало не лень, но мыслей накопилось уже на целый пост.

Возьмем самый первый попавшийся пример из приведенной статьи. Там в макете, в самом верху, есть полоска на всю ширину окна:

image

Автор принимает решение сверстать эту полоску с помощью тега
, вот так:

<body class="whitesquare">
  <hr/>
  <!-- вся остальная страница -->
</body>


.whitesquare hr {
  /* стили для полоски  */
}


Это просто супер пример несоблюдения моего правила.

Читать дальше →
Всего голосов 56: ↑33 и ↓23 +10
Просмотры 21K
Комментарии 24

12 малоизвестных возможностей CSS

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

В процессе работы с CSS я постоянно нахожу что-нибудь интересненькое, так что решил написать пост и поделиться своими знаниями с вами. Правда, учитывайте, что не всё, о чем будет рассказано, имеет непосредственное практическое значение, но, на всякий случай, в хозяйстве пригодится.
Читать дальше →
Всего голосов 115: ↑99 и ↓16 +83
Просмотры 136K
Комментарии 55

Сетки для адаптивного дизайна

Блог компании Rambler&Co Веб-дизайн *Типографика *Интерфейсы *


Мы собрали наиболее частые темы, связанные с сеткой в адаптивном дизайне, чтобы «повысить резкость» термина как такового и систематизировать практические знания: как настраивать сетку в дизайн-макете, по каким параметрам делать расчет, какие особенности адаптивной среды учитывать и на какие детали обращать внимание.
Читать дальше
Всего голосов 22: ↑22 и ↓0 +22
Просмотры 196K
Комментарии 3

12 малоизвестных фактов о CSS (продолжение)

Разработка веб-сайтов *CSS *HTML *
Перевод
Больше года назад я опубликовал 12 малоизвестных фактов о CSS (перевод на хабре), и по сей день это была одна из самых популярных статей на SitePoint. С тех пор я собирал больше интересностей и маленьких советов по CSS для новой публикации. Мы же все знаем, что каждый успешный фильм должен способствовать выходу новомодного сиквела, верно?


Автор иллюстрации SitePoint/Natalia Balska.

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

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

1. Оригинальная статья изобилует рабочими демонстрациями с CodePen. Хабр, к сожалению, не поддерживает вставки с подобных ресурсов, а заменять рабочие динамические примеры статичными картинками, думаю, не имеет смысла. Поэтому статья получилась немного «лысой» простыней, но, я надеюсь, заинтересованные читатели будут открывать недостающие примеры по ссылкам в новом окне.

2. Хотя я имею непосредственное отношение к верстке, перевод получился большим и не таким простым, как показался поначалу. Замечания по ошибкам, опечаткам, терминологии и т.п. просьба присылать личным сообщением в хабрапочту.
Читать дальше →
Всего голосов 56: ↑51 и ↓5 +46
Просмотры 57K
Комментарии 13

Верстаем отзывчивый сайт правильно с Fronzy media-queries

CSS *
Из песочницы
imageЛучший работник — ленивый работник, потому что он стремится выполнить поставленную задачу максимально просто. Задачу, решение которой конвертировалось в методологию Fronzy media-queries, можно описать так:
  1. Создать миксины в SCSS-документе для быстрого объявления медиа-запросов
  2. Использовать эти миксины в других проектах

Например, мы хотим, чтобы некоторые стили в css-документе применялись только для смартфонов с шириной экрана менее 600px. В css-документе мы напишем этот код:

@media screen and (max-width: 600px) { ... } // три точки - место для стилей

Но есть более краткая форма записи.
Читать дальше →
Всего голосов 14: ↑10 и ↓4 +6
Просмотры 11K
Комментарии 20

Сравнение css-фреймворков/библиотек на живом примере. Часть 1

Блог компании mr. Gefest Разработка веб-сайтов *CSS *JavaScript *HTML *
сравнение css-фреймворков на примере

Пролог


В данном цикле статей я намерен провести объективное сравнение css-фреймворков на основе живых примеров, как в TodoMVC для js решений.

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

Читать дальше →
Всего голосов 12: ↑8 и ↓4 +4
Просмотры 33K
Комментарии 26

Большой обзор красивых многоуровневых меню с codepen

Блог компании mr. Gefest Разработка веб-сайтов *CSS *HTML *


Хабр, привет!

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

Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest, это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).

Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.
Читать дальше →
Всего голосов 22: ↑19 и ↓3 +16
Просмотры 163K
Комментарии 33

Настройка PhpStorm для вёрстки на ОС Windows

Разработка веб-сайтов *
Из песочницы

Добрый день


Так сложилось, что возникла необходимость подготовить единую рабочую среду (workflow) для всех верстальщиков в группе на ОС Windows. Основная цель — это в минимальные сроки передать минимум необходимых знаний всем участникам группы. Основная проблема была в том, что многие не знакомы с unix-системами и понятия не имеют, как завести тот же SASS на ОС Windows. Поэтому было принято решение составить ознакомительную статью (пошаговую инструкцию) по настройке рабочей среды.

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

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

Итак начнём!
Читать дальше →
Всего голосов 17: ↑13 и ↓4 +9
Просмотры 159K
Комментарии 35

Пошаговый курс по созданию продающего Landing Page c нуля. Часть 1: Посадочные страницы и трафик

Блог компании Bloxy Интернет-маркетинг Повышение конверсии *
Tutorial


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

Читать дальше →
Всего голосов 14: ↑12 и ↓2 +10
Просмотры 53K
Комментарии 3

Пошаговый курс по созданию продающего Landing Page c нуля. Часть 2: Гипотезы и целевая аудитория

Блог компании Bloxy Интернет-маркетинг Повышение конверсии *
Tutorial


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

Гипотезы имеют очень важное значение. Они определяют ваш продукт, маркетинг, стратегию развития и идеи для роста. Итак, придумали мы классный продукт или любую бизнес идею и начинаем строить гипотезу. У меня есть такой продукт X (услуга, товар, курс...) и его будут покупать Y (бабушки, директора, дворники, автомобилисты...), так как он превосходно решает проблему Q (варки пельменей, ремонта автомобилей, доставки подарков...), потому что он Z (лучше, быстрее, проще, дешевле, удобнее, эффективнее...). Разберём подробнее.

Читать дальше →
Всего голосов 8: ↑8 и ↓0 +8
Просмотры 16K
Комментарии 0

Пошаговый курс по созданию продающего Landing Page c нуля. Часть 3: Узнаем потребности клиентов и определяем выгоды

Блог компании Bloxy Интернет-маркетинг Повышение конверсии *
Tutorial


В первой части мы поговорили о посадочных страницах, трафике и как это работает. Во второй статье мы построили гипотезы и определили нашу целевую аудиторию. Сейчас будем выяснять для каждого аватара отличительные черты, потребности, проблемы, мотивацию, критерии выбора и дополнительные факторы. Чтобы подготовить продающую основу для текстов на будущий лендинг.
Читать дальше →
Всего голосов 6: ↑6 и ↓0 +6
Просмотры 16K
Комментарии 0

Пошаговый курс по созданию продающего Landing Page c нуля. Часть 4: Тестирование выгод и анализ конкурентов

Блог компании Bloxy Интернет-маркетинг Повышение конверсии *
Tutorial


Различные тесты очень часто приносят совсем неожиданные результаты. Именно в этом их ценность. Тестирование помогает понять, правильная ли у нас гипотеза, насколько точно мы определили целевую аудитория и как поняли её проблемы, ценности, критерии выбора и как точно попали в нее продающим текстом, лендингом, сайтом, объявлением. Давайте приступим к тестированию.
Читать дальше →
Всего голосов 6: ↑6 и ↓0 +6
Просмотры 10K
Комментарии 1