Новая тема   Ответить

 Phil
вопрос решен.

Последний раз редактировалось: Phil (29/09/14 в 11:42), всего редактировалось 1 раз

 hardy
Phil писал:

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

Последний раз редактировалось: hardy (29/09/14 в 11:45), всего редактировалось 1 раз

 Phil
вопрос решен.

Последний раз редактировалось: Phil (29/09/14 в 11:41), всего редактировалось 1 раз

 Phil
Спасибо! Все доделали !

 Phil
вопрос решен.

 Deyatel_Kyltyru
Сотрудничаю с ребятами, ИМХО лучшие на мастере, рекомендую

 SteelArt
Молодцы!

Последний раз редактировалось: SteelArt (05/07/15 в 23:36), всего редактировалось 1 раз

 HST
Внесу свои 5 евроцентов в отзывы о команде Adult-html. Это действительно талантливые дизайнеры, специалисты по верстке и натяжке, всегда коммуникабельные и вежливые, идущие на встречу по заурядным и незаурядным вопросам любой сложности. Четко выполнили гигантский объем работы чтобы угодить моим многогранным ТЗ. Кстати, наконец-то изменили облик своему сайту, сделали его просто улетным.
Всем хорошего дня! )

 Jager
добавлю свой отзыв,

давно работаю с adult-html, всегда все четко и в срок. лучшей верстки пока не видел.

 xDiver
очень сильно выручил с версткой, мега респект!
Рекомендую 5+

 MegaMedia
в очередной раз обратился к Hardy с вопросами по KVS. Решил все мои проблемы быстро! Рекомендую

 large
Очень доволен работой с Adult-html.com . Вытерпели все мои просьбы и пожелания.
Получил то, что хотел, без каких либо проблем.

 Ea$y Vi$ion
4-й год обращаюсь к этим ребятам, как с мелкими правками так и за сайтами под ключ. Качественно исполняют свою работу
П.С. всегда доволен ими, рекомендую!!!
П.П.С. терпеливы к клиенту

 hardy
Друзья, по весьма приятной причине (у нашего менеджера родился сын), сегодня и завтра может быть задержка с ответами в аську и скайп. Если мы вам не ответили там, напишите пожалуйста в почту, adulthtml(a)gmail.com

Спасибо

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

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

 hardy
# записки верстальщика
Иконки и иконочные шрифты

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

1. Вырезаем каждую иконку отдельно и подключаем в хтмл как <img src=”images/iconName.gif” alt=””>. Самый древний метод, имеет много минусов:
- если не указаны в хтмл размеры картинки - контент страницы при заходе на нее будет “прыгать” до тех пор, пока все изображения не загрузятся
- если картинка по какой-то причине не загрузится - некоторые браузеры покажут на ее месте крестик
- иконки это часть оформления, а не содержания, поэтому с точки зрения семантики ей нет места в хтмл разметке.

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

3. Подключаем иконки в виде base64 кода (data:uri). Кодируем изображение в base64 код и вставляем этот код прямо в файл стилей. Иконки грузятся одновременно со стилями, поэтому появляются на странице сразу и без задержки. Нету лишних запросов к серверу.
- подходит для картинок весом до 5кб, и если этих картинок не 100500 штук. Вес строчки base64 кода больше веса картинки, экономия затрат только на времени соединения. Поэтому для больших картинок или если этих картинок очень много - размер файла цсс сильно раздуется и задержка будет не только в загрузке иконок, но и в загрузке стилей.

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


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

Для борьбы с этим гемором светлые головы решили, что иконки - это по сути векторные объекты, такие же как шрифт. То есть можно создать новый шрифт, в котором вместо букв будут иконки. Например, в фреймворке бутстрап включен иконочный шрифт Glyphicon, http://getbootstrap.com/components/#glyphicons , в нем есть 260 иконок, которые вы можете использовать просто повесив класс на какой-либо тег, например <i class=”glyphicon glyphicon-star”></i>. Есть и другие иконочные шрифты, например Font Awesome http://fontawesome.io/ . С такими иконками вы можете проводить такие же манипуляции что и со шрифтом - менять размер, менять цвет, добавлять тень. Поддерживается уже везде (за исключением древних андроидов, которые в реальной жизни уже практически не встречаются).

Но нужны ли вам все 260 иконок (или даже 519 в font awesome)? Обычно достаточно пары десятков, а то и того меньше. Поэтому можно пойти дальше, и воспользоваться генератором иконочных шрифтов. Мы активно пользуемся двумя: http://fontello.com/ и https://icomoon.io/ . В них можно выбрать из разных шрифтов только необходимые для конкретного проекта иконки, или можно сконвертировать свои, созданные дизайнером векторные иконки, в кастомный иконочный шрифт.
Если спустя какое-то время понадобится добавить новые иконки в уже существующий шрифт - не беда. В генераторе можно импортировать файл конфигурации, который идет вместе со шрифтом, и в нем уже есть информация о существующих в этом шрифте иконках.

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

Последний раз редактировалось: hardy (18/06/15 в 11:45), всего редактировалось 2 раз(а)

 MegaMedia
Обратился к Харди с проблемами в верстке.
Как обычно проблема была решена очень быстро!
Спасибо

 Goajazzz
Hardy пофиксил мне верстку, все как часы, Спасибо!

 3Sky


снова положительный отзыв ) сделал диз, наворотил хрен чего. ребята все сделали

 hardy
# записки верстальщика
Шрифты на веб-страницах.

Задача верстальщика – сохранить типографику дизайнера: шрифты, их размеры, жирность, межстрочное расстояние и т.д. И это все должно работать в разных браузерах и под разными системами. Существуют безопасные вэб-шрифты (web-safe fonts) – это те, что, скорее всего, установлены во всех системах. Их список можно посмотреть здесь http://www.w3schools.com/cssref/css_websafe_fonts.asp Но что делать, если дизайнер решил использовать шрифт не из этого списка?

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

Если шрифт платный – задача усложняется. Во-первых, предупреждаем заказчика, что дизайнер использовал платный шрифт, и по-хорошему нужно покупать этот шрифт или подписку на него на https://www.myfonts.com/topwebfonts/ или подобных ресурсах. Если заказчик не готов платить за шрифт, предлагаем похожие альтернативы с гугл фонтс. Даже при наличии системного файла с платным шрифтом, мы не сможем его сконвертировать нормальным генератором вроде FontSquirrel, т.к. он будет выдавать ошибку из-за лицензии. Другие же генераторы, которые не проверяют лицензию шрифта, зачастую выдают очень кривой результат, где буквы прыгают по высоте, или у разных букв разная жирность.

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

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

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

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

 3Sky
поздравляю! а особые условия с особыми условиями? )

 hardy


ну а как иначе? )) обращайся ;)

 mazzzer2
Сделали все качественно, после сдачи не бросили и помогли допилить

Последний раз редактировалось: mazzzer2 (06/04/16 в 12:59), всего редактировалось 1 раз

 RTV
Хочу выразить благодарность команде Adult HTML за наше с ними плодотворное сотрудничество! За последний год было реализовано 6 проектов высочайшего уровня, как в плане дизайна, так и технически. Отдельно хочется отметить процесс работы по проекту от ТЗ до готового порезанного html, все делается быстро и четко по ТЗ, правки, если требуются, выполняются за считанные часы.

Творческих успехов и интересных проектов вашей команде!