Splat

[СергейРусков]

Сам макет и ТЗ находятся здесь http://htmlforum.ru/index.php?showtopic=47965 . Собственно хотел обсудить там, но злые админы запретили. Так вот, хотел бы выразить благодарность Klierik'у за отличный макет, много чему научился выполняя его ТЗ.

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

Момент с шириной сайта в ТЗ я не совсем понял, написано стандартная ширина сайта 960px, а в макете 940px, делал по макету.

Промо слайдер это что-то с чем-то. Насколько я понял сделать его именно таким как в макете, это задача настолько сложная, что можно сказать невыполнимая. Вся сложность заключается в корректной работе слайдера при условии, что ячейки в навигационной строке имеют разную длину (в зависимости от кол-ва символов в них), я использовал Royal Slider, вот мнение автора слайдера по этой проблеме http://help.dimsemenov.com/discussions/problems/11648-thumbnails-width-different-widths . Можно конечно с помощью подбора длины слов получить приемлемый результат вроде этого http://bestfuns.url.ph/Task1/ , но это костыли, да и если прокрутить этот слайдер до конца вправо будет виден зазор между ячейкой и границей навигационной строки. Если кто знает решение, или слайдер в котором данная возможность поддерживается, поделитесь пожалуйста.

Отдельно прошу придираться к JS и Scss(использование ф-ий, примесей, написание собственных, переменные и т.д.). Заранее спасибо!

Сам сайт: http://www.tech-drive.ru/sergey/splat/

Исходники

Edited September 4, 2014 by СергейРусков

[Sergik+]

Нету сайта ( ссыль битая.

[СергейРусков]

проверил еще раз все ссылки, привлек друзей, все отлично работает

[Sergik+]

Слайдер прикольный.

У меня на буке колонки слипаются, чуть не наезжают друг на друга, очень не красиво смотрится,

поправьте отступы.

Edited August 21, 2014 by Sergik+

[СергейРусков]

Слайдер прикольный.

У меня на буке колонки слипаются, чуть не наезжают друг на друга, очень не красиво смотрится,

поправьте отступы.

Извините, можно попросить скриншот и название и версию браузера, а так же операционной системы, я этот сайт проверил в Сафари, Хроме, Опере и Фаерфоксе, в последних 2 версиях этих браузеров, а так же в 8-11IE нигде ничего не слипалось, сложно править не зная на чем тестировать, и как выглядит проблема. Спасибо.

[Sergik+]

Винда 8 лицуха, лиса и эксплорер последние, не совсем слипаются а отступы слишком маленькие,

на глаз 10-15px, визуально просто невозможно смотреть.

У вас margin-right:5px всего.

Edited August 21, 2014 by Sergik+

[СергейРусков]

Винда 8 лицуха, лиса и эксплорер последние, не совсем слипаются а отступы слишком маленькие,

на глаз 10-15px, визуально просто невозможно смотреть.

У вас margin-right:5px всего.

Тогда pixel perfect можно скомкать и выкинуть, вообще, Вы конечно правы, я думал, что проблема в шрифте, но я попробовал Helvetic, Open Sans из google fonts и везде было примерное тоже самое что Вы видите сейчас.

[swandev]

 

Винда 8 лицуха, лиса и эксплорер последние, не совсем слипаются а отступы слишком маленькие,

на глаз 10-15px, визуально просто невозможно смотреть.

У вас margin-right:5px всего.

Тогда pixel perfect можно скомкать и выкинуть, вообще, Вы конечно правы, я думал, что проблема в шрифте, но я попробовал Helvetic, Open Sans из google fonts и везде было примерное тоже самое что Вы видите сейчас.

 

Зачем выкидывать, делаете идеально в хроме, в других браузерах также никогда не будет.

[СергейРусков]

Винда 8 лицуха, лиса и эксплорер последние, не совсем слипаются а отступы слишком маленькие,

на глаз 10-15px, визуально просто невозможно смотреть.

У вас margin-right:5px всего.

Тогда pixel perfect можно скомкать и выкинуть, вообще, Вы конечно правы, я думал, что проблема в шрифте, но я попробовал Helvetic, Open Sans из google fonts и везде было примерное тоже самое что Вы видите сейчас.

Зачем выкидывать, делаете идеально в хроме, в других браузерах также никогда не будет.

Именно так и сделано, но если добавить марджин все пойдет коту под хвост, можно конечно поиграть letter spacing, поменять шрифт, line-height и т.д. но из того что я пробовал - это оптимально.

[Sergik+]

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

уж поверьте что всю сумму вы точно не получите.

Я кстати починил ваш сайт за 1 минуту, всего две строчки подправил.

Edited August 22, 2014 by Sergik+

[klierik]

Момент с шириной сайта в ТЗ я не совсем понял, написано стандартная ширина сайта 960px, а в макете 940px, делал по макету.

 

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

и кстати, картинки такого типа: http://www.tech-drive.ru/sergey/splat/pic/royalSlider/iney.jpg должны быть не JPEG а PNG, так как первый косячит с текстом.

[СергейРусков]

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

уж поверьте что всю сумму вы точно не получите.

Я кстати починил ваш сайт за 1 минуту, всего две строчки подправил.

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

 

И, кстати, если представим, что я заказчик и поставил буквально третьим пунктов ТЗ вот такое условие ( http://htmlforum.ru/index.php?showtopic=47965 ):

 

Соответствие макету

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

 

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

 

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

 

Момент с шириной сайта в ТЗ я не совсем понял, написано стандартная ширина сайта 960px, а в макете 940px, делал по макету.

 

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

и кстати, картинки такого типа: http://www.tech-drive.ru/sergey/splat/pic/royalSlider/iney.jpg должны быть не JPEG а PNG, так как первый косячит с текстом.

 

Спасибо еще раз!

 

Эх чувствовал, что с этой шириной что-то не чисто, переделаю 

 

Про влияние JPEG формата на края текста после компресии для меня тоже новость, очень ценно.

 

И если у Вас будет вдруг свободные 10-15 мин буду Вам крайне благодарен, если Вы глянете наметанным глазом (можно даже двумя  ), на исходники Scss и JS, наверняка, что-то сразу будет резать глаз. Спасибо.

Edited August 22, 2014 by СергейРусков

[Sergik+]

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

[СергейРусков]

Какой Вы упрямый целью этой работы и не было сдать ее кому-либо, цель верстки для начинающих найти МАКСИМАЛЬНОЕ кол-во ошибок в своей работе и устранить их, а не спорить по поводу недочета который приводит к другому недочету. Ну да бог с ним, я нашел компромисс, так же исправлены ошибки указанные Klierik'ом. http://www.tech-drive.ru/sergey/splat/

Edited August 22, 2014 by СергейРусков

[Catherine]

Судя по всему боковые тени относятся не ко всему слайдеру, а к меню, поэтому я бы повесила псевдоэлементы не на #promoSlider, а на .rsNav. К тому же, при наведении на пункты псевдоэлементы перекрывают активную область, и клик по ним по краям слайдера не происходит (http://c2n.me/iMmtPM.jpg). Я бы использовала pointer-events на :before & :after.

[Sergik+]

Так я исправил ваши ошибки всего двумя строчками, через пару недель доберусь до этого макета,

глянем чего у меня получится .

[СергейРусков]

Так я исправил ваши ошибки всего двумя строчками, через пару недель доберусь до этого макета,

глянем чего у меня получится .

Позвольте, что за ошибки ? Расскажите, мне же интересно! И главное где вы их исправили? В испекторе кода? Извините, я ничего не понял 

 

Судя по всему боковые тени относятся не ко всему слайдеру, а к меню, поэтому я бы повесила псевдоэлементы не на #promoSlider, а на .rsNav. К тому же, при наведении на пункты псевдоэлементы перекрывают активную область, и клик по ним по краям слайдера не происходит (http://c2n.me/iMmtPM.jpg). Я бы использовала pointer-events на :before & :after.

Безумно ценно!! Сегодня же займусь, пока даже не слышал об этом pointer-event.

Edited August 22, 2014 by СергейРусков

[Sergik+]

Вот вы спорить любите, сделайте ширину параграфа 220px как в макете, сразу красота будет.

ВСЕГО ОДНА СТРОЧКА. Специально для вас скачал макет. Я бы еще со шрифтами поиграл,

но пока другой макет верстаю.

Кстати я в шоке, а кто нибудь верстал данный макет ? Первый и последний параграф одинаковые,

а два средних разные.

Примерно должно быть по макету ширина параграфа 220px и margin:20px, примерно потому что

если правильно то ширина секции должна быть 220px а у всех параграфов размеры разные,

но мне такая концепция вообще мозг взрывает.

Edited August 22, 2014 by Sergik+

[СергейРусков]

Вот вы спорить любите, сделайте ширину параграфа 220px как в макете, сразу красота будет.

ВСЕГО ОДНА СТРОЧКА. Специально для вас скачал макет. Я бы еще со шрифтами поиграл,

но пока другой макет верстаю.

Кстати я в шоке, а кто нибудь верстал данный макет ? Первый и последний параграф одинаковые,

а два средних разные.

Какой-то конфликтный характер разговора назревает, но отвечу по существу.

 

1. Если изменить ширину параграфа на 220px сразу как в макете не получится, наложите pixel perfect и увидите это.

 

2. Та часть про отступы про которую Вы писали и так уже выполнена, отступ между секциями внутри слайдера составляет 15px об это я написал 2 сообщения назад, зачем что-то еще менять?

[Sergik+]

Откуда конфликт то ? Нормальная рабочая дискуссия, самому этот макет скоро верстать.

Плюньте вы на этот PixelPerfect, по макету минимальный маржин 28px. Кстати глянул на ББ

там все нормально а на буке все слипается. Хотя глянул с маргином получше стало,

я же говорил. ) К макету куча вопросов если честно.

По макету ширина секции 220px и margin: 20px, ширина параграфа разная,

ошибки в макете присутствуют, подойдите творческий, пихел перфект тут

сложно применять.

Edited August 22, 2014 by Sergik+

[СергейРусков]

Судя по всему боковые тени относятся не ко всему слайдеру, а к меню, поэтому я бы повесила псевдоэлементы не на #promoSlider, а на .rsNav. К тому же, при наведении на пункты псевдоэлементы перекрывают активную область, и клик по ним по краям слайдера не происходит (http://c2n.me/iMmtPM.jpg). Я бы использовала pointer-events на :before & :after.

Все сделал, добавил проверку браузеров на поддержку pointer-events, если не поддерживается, тогда затемнения элегантно уходят влево и вправо(transition-delay: 1s, если не поддерживается transition, тогда не элегантно , при hover на .rsNav(спасибо за наводку, черновой и глупый косяк). Буду очень благодарен, если копнете поглубже. Спасибо еще раз.

[xzarxzes]

В scss вроде как можно не писть родительский  селектор перед комбинатором. Вместо " & > ", можно писать просто " > ". В макете список в шапке в две колонки, у вас в одну, вот тут можно посмотреть как это можно сделать с использованием отрицательного маржина (в ссылке которую вы указали, список в одну колонку и с буллетами, а в архиве, который на гугул диске, в две, только там не спсок, а ссылки). Не рекомендуют использовать html5 shim из этого репозитория, кроме того вы подключаете modernizr, в котором есть html5 shim.

 

upd: А нет у вас modernizr, только в dev версии, ну как бы там нибыло, думаю лучше подключить modrnizr, даже если вы не используете остальные его функции, можно выбрать только html5 shim, только там он называется shiv, но я так понял это одно и тоже.

Edited August 22, 2014 by xzarxzes

[СергейРусков]

В scss вроде как можно не писть родительский  селектор перед комбинатором. Вместо " & > ", можно писать просто " > ". В макете список в шапке в две колонки, у вас в одну, вот тут можно посмотреть как это можно сделать с использованием отрицательного маржина (в ссылке которую вы указали, список в одну колонку и с буллетами, а в архиве, который на гугул диске, в две, только там не спсок, а ссылки). Не рекомендуют использовать html5 shim из этого репозитория, кроме того вы подключаете modernizr, в котором есть html5 shim.

 

udp: А нет у вас modernizr, только в dev версии, ну как бы там нибыло, думаю лучше подключить modrnizr, даже если вы не используете остальные его функции, можно выбрать только html5 shim, только там он называется shiv, но я так понял это одно и тоже.

Спасибо за такое глубокое изучение вопроса! Даже отсутствие html5shiv в modernizr заметили, интересно как ?

 

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

 

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

 

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

 

Всегда буду рад новым замечаниям!

 

UPD

 

 

Прочитал статью про отрицательные margin, для академических целей конечно интересно, но по моему это ужасно выталкивать элементы за пределы родительского элемента, и если положить на мою задачу (разбить список на 2 столбца), то в результате получатся 2 разных списка, а этот пункт в ТЗ обговорен отдельно: 

 

1.1. Меню - Все как видно так и делать. Пунктов меню может быть больше -- это один список который выводится в 2 столбца. Текст пункта меню может быть длинее и распологатся в 2 строки. Обратить внимание на высоту строки в этом блоке, так как пункт в 2 строки будет выглядеть плотнее.

 

Но все равно было интересно!

Edited August 22, 2014 by СергейРусков

[xzarxzes]

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

 

Хотел у вас спросить у вас в грант файле, есть таск cssmin, можно же сдлеать это через компасс, чтобы он в production отдавал сжатый css, или все же лучше использовать ccsmin, всвязи с тем что у него больше возможностей, например gzip ?

[СергейРусков]

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

Хотел у вас спросить у вас в грант файле, есть таск cssmin, можно же сдлеать это через компасс, чтобы он в production отдавал сжатый css, или все же лучше использовать ccsmin, всвязи с тем что у него больше возможностей, например gzip ?

http://zoompf.com/blog/2012/05/html5shiv-and-serving-content-from-code-repositories - по поводу этой статьи, если верить тому что написано, то даже jQuery CDN использовать нет смысла, так как главная фишка - кеширование, сохраняет файл только на 180 сек, а он еще и не везде подключен, занятно... завтра погуглю побольше.

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

Все просто, так проще дебажить, если обратите внимание я и line_comments = true оставил, мне кажется разработка должна быть удобной, а cssmin, просто, для того чтобы написать одну строку и получить сразу production.

Edited August 22, 2014 by СергейРусков