Не стыдно ли показать тестовой задание?

[Siela]

Здравствуйте

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

1. Это тестовое задание на в одном из агенств по созданию сайтов. 

ТЗ в кратце: 

• IE6(достаточно чтобы не плыл каркас сайта)
• IE7-IE10
• Chrome+
• Firefox 3+
• Opera 12+

Верстка статичная - 1000px.

 

https://googledrive.com/host/0B0mGEhhlwZFAdk1RUm11TWJuUG8/

 

2. Вторая страница взята на сайте freelansim.ru (yt как работа, просто макет был в открытом доступе).

Здесь ТЗ: IE до 7го, остальные браузеры как всегда.

Верстка резиновая, при ширине меньше 900px переходит в резиновую версию (в ie у меня не работает, но наверное в нем это и не надо).

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

Немного js - автофокус в низу страницы при нажатии "зарегестрироваться", "оставить заявку" и тд.

 

https://googledrive.com/host/0B0mGEhhlwZFAM1lMSE85ZGpmOXM/

В целом что беспокоит - наплодила классов, т.к. не все псевдоклассы работают в IE, чем можно было бы заменить любимый nth-child? 

В первом макете отказалась от семантики html5, т.к. даже с применение скрипта, создающего эти объекты к некоторым стили не применялись. опять же, не неправа ли я? Так же многое наделала картинками, особено градиенты. Неприятно это, зачем тогда столько кода писалось?)

 

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

Заранее спасибо!)

[dmsirotenko]

Здравствуйте

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

1. Это тестовое задание на в одном из агенств по созданию сайтов. 

ТЗ в кратце: 

• IE6(достаточно чтобы не плыл каркас сайта)
• IE7-IE10
• Chrome+
• Firefox 3+
• Opera 12+

Верстка статичная - 1000px.

 

https://googledrive.com/host/0B0mGEhhlwZFAdk1RUm11TWJuUG8/

 

2. Вторая страница взята на сайте freelansim.ru (yt как работа, просто макет был в открытом доступе).

Здесь ТЗ: IE до 7го, остальные браузеры как всегда.

Верстка резиновая, при ширине меньше 900px переходит в резиновую версию (в ie у меня не работает, но наверное в нем это и не надо).

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

Немного js - автофокус в низу страницы при нажатии "зарегестрироваться", "оставить заявку" и тд.

 

https://googledrive.com/host/0B0mGEhhlwZFAM1lMSE85ZGpmOXM/

В целом что беспокоит - наплодила классов, т.к. не все псевдоклассы работают в IE, чем можно было бы заменить любимый nth-child? 

В первом макете отказалась от семантики html5, т.к. даже с применение скрипта, создающего эти объекты к некоторым стили не применялись. опять же, не неправа ли я? Так же многое наделала картинками, особено градиенты. Неприятно это, зачем тогда столько кода писалось?)

 

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

Заранее спасибо!)

Второй макет:

• Зарегистрироваться )
• "Как это работает" текст слева прилипает к краю

Теперь по-поводу кода. Так в принципе порядок, но тег article лучше использовать по своему прямому назначению, т.е. со статьями.

Edited November 20, 2013 by dmsirotenko

[roman_kr_ru]

Каким образом вы тестируете сайт в IE? Режим эмуляции в IE10 подходит для этого?

[dmsirotenko]

Каким образом вы тестируете сайт в IE? Режим эмуляции в IE10 подходит для этого?

есть программа ietester, можно тестировать все версии с 5 по 10

[Siela]

Каким образом вы тестируете сайт в IE? Режим эмуляции в IE10 подходит для этого?

 

 

 

 

если честно пока что только так и тестирую) 

очень бы хотелось найти человека с 6 ie, ибо такого режима у меня нет

 

Каким образом вы тестируете сайт в IE? Режим эмуляции в IE10 подходит для этого?

есть программа ietester, можно тестировать все версии с 5 по 10

 

 

Спасибо, надо попробовать)

 

Здравствуйте

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

1. Это тестовое задание на в одном из агенств по созданию сайтов. 

ТЗ в кратце: 

• IE6(достаточно чтобы не плыл каркас сайта)
• IE7-IE10
• Chrome+
• Firefox 3+
• Opera 12+

Верстка статичная - 1000px.

 

https://googledrive.com/host/0B0mGEhhlwZFAdk1RUm11TWJuUG8/

 

2. Вторая страница взята на сайте freelansim.ru (yt как работа, просто макет был в открытом доступе).

Здесь ТЗ: IE до 7го, остальные браузеры как всегда.

Верстка резиновая, при ширине меньше 900px переходит в резиновую версию (в ie у меня не работает, но наверное в нем это и не надо).

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

Немного js - автофокус в низу страницы при нажатии "зарегестрироваться", "оставить заявку" и тд.

 

https://googledrive.com/host/0B0mGEhhlwZFAM1lMSE85ZGpmOXM/

В целом что беспокоит - наплодила классов, т.к. не все псевдоклассы работают в IE, чем можно было бы заменить любимый nth-child? 

В первом макете отказалась от семантики html5, т.к. даже с применение скрипта, создающего эти объекты к некоторым стили не применялись. опять же, не неправа ли я? Так же многое наделала картинками, особено градиенты. Неприятно это, зачем тогда столько кода писалось?)

 

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

Заранее спасибо!)

Второй макет:

• Зарегистрироваться )
• "Как это работает" текст слева прилипает к краю

Теперь по-поводу кода. Так в принципе порядок, но тег article лучше использовать по своему прямому назначению, т.е. со статьями.

 

 

А можно скрин как текст прилипает? что-то не очень поняла

 

С article спасибо, буду для текстов использовать =)

Edited November 20, 2013 by Siela

[dmsirotenko]

 

Каким образом вы тестируете сайт в IE? Режим эмуляции в IE10 подходит для этого?

 

 

 

 

если честно пока что только так и тестирую) 

очень бы хотелось найти человека с 6 ie, ибо такого режима у меня нет

 

Каким образом вы тестируете сайт в IE? Режим эмуляции в IE10 подходит для этого?

есть программа ietester, можно тестировать все версии с 5 по 10

 

 

Спасибо, надо попробовать)

 

Здравствуйте

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

1. Это тестовое задание на в одном из агенств по созданию сайтов. 

ТЗ в кратце: 

• IE6(достаточно чтобы не плыл каркас сайта)
• IE7-IE10
• Chrome+
• Firefox 3+
• Opera 12+

Верстка статичная - 1000px.

 

https://googledrive.com/host/0B0mGEhhlwZFAdk1RUm11TWJuUG8/

 

2. Вторая страница взята на сайте freelansim.ru (yt как работа, просто макет был в открытом доступе).

Здесь ТЗ: IE до 7го, остальные браузеры как всегда.

Верстка резиновая, при ширине меньше 900px переходит в резиновую версию (в ie у меня не работает, но наверное в нем это и не надо).

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

Немного js - автофокус в низу страницы при нажатии "зарегестрироваться", "оставить заявку" и тд.

 

https://googledrive.com/host/0B0mGEhhlwZFAM1lMSE85ZGpmOXM/

В целом что беспокоит - наплодила классов, т.к. не все псевдоклассы работают в IE, чем можно было бы заменить любимый nth-child? 

В первом макете отказалась от семантики html5, т.к. даже с применение скрипта, создающего эти объекты к некоторым стили не применялись. опять же, не неправа ли я? Так же многое наделала картинками, особено градиенты. Неприятно это, зачем тогда столько кода писалось?)

 

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

Заранее спасибо!)

Второй макет:

• Зарегистрироваться )
• "Как это работает" текст слева прилипает к краю

Теперь по-поводу кода. Так в принципе порядок, но тег article лучше использовать по своему прямому назначению, т.е. со статьями.

 

 

А можно скрин как текст прилипает? что-то не очень поняла

 

С article спасибо, буду для текстов использовать =)

 

[Z1gnet]

Укажу на ошибки первого макета.

1. Фонт лучше задать на боди, а на маин.  Во-вторых фонт нужно задавать основной на странице, что бы если просто вставят текст - он будет в этом стиле. Это уж никак не навигации, в вашем случае скорее всего вот эта часть http://prntscr.com/25k6tx

2. Нету ни одного ховера на ссылках!!! Это очень плохо, если в дизайне не нарисованы ховеры, то делайте андерлайн.  И не нужно на ссылки задавать :visited, если вы его не трогаете, а на ссылки зададите цвет глобально то визитед никак не будет себя проявлять.  Кстати обязательно  должен быть задан дефолтный цвет ссылок для всего сайта. в вашем случае я бы задал такие стили

a{color:#EC8D99;text-decoration:underline;}a:hover{text-decoration:none;}

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

 

3. http://prntscr.com/25k7fg неверная кликабельная область ссылок. Либо задайте марджин вместо паддинга, либо паддинг на li

4. логотип должен быль обязательно кликабельным (заверните в ссылку)

5. коль уж поставили доктайп хтмл5 то будьте добры юзать его. хотя бы вставить теги nav, header, footer, aside. нумаю не нужно обьяснять какой куда)))

6. адрес фирмы нужно засунуть в тег address

7. НЕЕВАЛИДНЫЙ хтмл! проверяйте валидатором и исправляйте ошибки. http://prntscr.com/25kde6 внутри ul должен идти только li, а уже внутри него можно сувать что угодно.

8. http://prntscr.com/25ke0p полоску нужно вырезать одну и вешать не на ul , а на li . У каждой li будет своя полоска. а ну и одну полоску повесить на ul для того что бы установить последнюю полосу (простите за тавтологию)

9. зачем в батон ссылку пихать? либо одно, либо другое http://prntscr.com/25kfhq

10. используйте сокращенные записи http://prntscr.com/25kgdd margin:34px 0 0 300px;

11. этот блок сделан не правильно http://prntscr.com/25kgoq если добавить контента то вот какая фигня получается http://prntscr.com/25kgxn

что бы этого не происходило нужно сделать для .news :  1) вырезать правильно фон (без бордера) 2) задать бордер через цсс. 3)добавить заливку цветом самого нижнего пикселя http://prntscr.com/25ki4o в вашем случае это #B60010 и отменить повторения фонового рисунка. в итоге должно получиться так background:#B60010 url("../img/news.png") no-repeat;    4) убрать высоту и задать overflow:hidden (потому что внутри флотнутые элементы).

12. имага накрыла этот текст http://prntscr.com/25kk57

13. http://prntscr.com/25kkiq нельяза  задавать этот фон на .main-container потому что это фон относится к диву .article http://prntscr.com/25kkud . проблема в том что если вдруг убрать .article получится вот такая лабуда http://prntscr.com/25kl9n

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

в браузерах разных смотреть не буду, думаю с этим сами справитесь

P.S. http://prntscr.com/25kmvs старайтесь не задавать фиксированную высоту, только в случае крайней необходимости. в большинстве случаев можно заменить на min-height

[SelenIT]

тег article лучше использовать по своему прямому назначению, т.е. со статьями.

dmsirotenko, не дезинформируйте человека, article — не обязательно статья, это любая автономная сущность, которую можно целиком перенести в другой контекст (напр. в RSS-фид) без потери смысла.

Siela, для первого раза, на мой взгляд, очень неплохо, особенно второй макет, с адаптивкой. Единственное, что мне сильно резануло глаз в коде — якоря через ископаемый <a name="...">. Чем плох стандартный способ через id?

 

Насчет «семантики HTML5» я как раз поддерживаю прагматичный подход, вводить новые элементы (как и любые другие) стоит тогда, когда от них есть реальная польза, а не «абы были». Содержимое всего сайта, имхо, как раз можно в <article> не оборачивать. Вот отделить важную смысловую часть с помощью <main> может быть полезно.

[dmsirotenko]

тег article лучше использовать по своему прямому назначению, т.е. со статьями.

dmsirotenko, не дезинформируйте человека, article — не обязательно статья, это любая автономная сущность, которую можно целиком перенести в другой контекст (напр. в RSS-фид) без потери смысла.

Siela, для первого раза, на мой взгляд, очень неплохо, особенно второй макет, с адаптивкой. Единственное, что мне сильно резануло глаз в коде — якоря через ископаемый <a name="...">. Чем плох стандартный способ через id?

Насчет «семантики HTML5» я как раз поддерживаю прагматичный подход, вводить новые элементы (как и любые другие) стоит тогда, когда от них есть реальная польза, а не «абы были». Содержимое всего сайта, имхо, как раз можно в <article> не оборачивать. Вот отделить важную смысловую часть с помощью <main> может быть полезно.

Читал, что с точки зрения seo, article лучше использовать для статей. Edited November 21, 2013 by dmsirotenko

[SelenIT]

с точки зрения seo, article лучше использовать для статей

Вот это интересно. Буду благодарен за ссылку! Сам, сколько интересовался вопросом, не смог найти ни одного подтверждения влияния модных тегов на SEO.

[swandev]

Кто-то еще верстает под IE6? Я бы забил на это дело, и нашел нормального заказчика/студию.

 

 

5. коль уж поставили доктайп хтмл5 то будьте добры юзать его. хотя бы вставить теги nav, header, footer, aside. нумаю не нужно обьяснять какой куда)))

По-вашему если я ставлю доктайп, то обязан использовать эти теги? Можно об этом где-то почитать?

[SelenIT]

если я ставлю доктайп, то обязан использовать эти теги?

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

[dmsirotenko]

с точки зрения seo, article лучше использовать для статей

Вот это интересно. Буду благодарен за ссылку! Сам, сколько интересовался вопросом, не смог найти ни одного подтверждения влияния модных тегов на SEO.

http://www.highervisibility.com/blog/how-html5-helps-improve-your-seo-efforts/ Edited November 21, 2013 by dmsirotenko

[Vin]

Кто-то еще верстает под IE6? Я бы забил на это дело, и нашел нормального заказчика/студию.

Да, жалкие 0.2% (данные по Белоруссии) с браузером 12-летней давности так важны)) Странно, что NN3 в списке нет))

 

По второму макету:

• вместо <!--[if IE]> следует написать <!--[if lt IE 9]> или <!--[if lte IE 8]>, т.к. IE9 семантические элементы HTML5 поддерживает.
• Инпуту внизу следует задать type, а в качестве подсказки вместо дефолтного значения использовать атрибут placeholder. Для ие и прочих древностей поддержку плейсхолдера эмулируем скриптом placeholder.js (условные комментарии не нужны, скрипт сам определяет поддержку).

Edited November 21, 2013 by Vin

[SelenIT]

http://www.highervis...ur-seo-efforts/

Спасибо за ссылку, но я так и не понял, на чем это утверждение основано. Очень похоже, что автор просто повторяет популярные рекламные байки периода начала HTML5-шумихи. Кстати, он советует оборачивать в <article> не всё что ни попадя, а то, что «can be syndicated» (в согласии со спецификацией).

 

Три года назад представитель самого Гугла говорил, что каких-либо отличий в анализе HTML5-тегов у Гугла нет, с оговоркой «мы еще посмотрим, как эти теги будут применяться в действительности, будет ли от них реальный толк и не будет ли вреда, если вебмастера будут применять их неправильно». Год назад он утверждал, что HTML5-разметка анализируется точно так же, «как и любая другая» (дивы и т.п.), т.е. ситуация существенно не изменилась. В свете продолжающихся споров об этих структурных элементах, появления нового элемента <main> и т.д., по-моему, очень маловероятно, чтобы и последний год что-то сильно изменил.

[Siela]

 

Исправила, спасибо за замечание)

 

тег article лучше использовать по своему прямому назначению, т.е. со статьями.

dmsirotenko, не дезинформируйте человека, article — не обязательно статья, это любая автономная сущность, которую можно целиком перенести в другой контекст (напр. в RSS-фид) без потери смысла.

Siela, для первого раза, на мой взгляд, очень неплохо, особенно второй макет, с адаптивкой. Единственное, что мне сильно резануло глаз в коде — якоря через ископаемый <a name="...">. Чем плох стандартный способ через id?

 

Насчет «семантики HTML5» я как раз поддерживаю прагматичный подход, вводить новые элементы (как и любые другие) стоит тогда, когда от них есть реальная польза, а не «абы были». Содержимое всего сайта, имхо, как раз можно в <article> не оборачивать. Вот отделить важную смысловую часть с помощью <main> может быть полезно.

 

Сказывается чтение книги 2008 года) Не знала, что так можно, исправилась, спасибо)

Кто-то еще верстает под IE6? Я бы забил на это дело, и нашел нормального заказчика/студию.

 

 

5. коль уж поставили доктайп хтмл5 то будьте добры юзать его. хотя бы вставить теги nav, header, footer, aside. нумаю не нужно обьяснять какой куда)))

По-вашему если я ставлю доктайп, то обязан использовать эти теги? Можно об этом где-то почитать?

Нда, теперь то я понимаю. Вплоть до неподдержки прозрачности png-24 печаль) может и впрямь не стоит идти к тем, кто поддерживает, а то так и буду плеваться)

 

Кто-то еще верстает под IE6? Я бы забил на это дело, и нашел нормального заказчика/студию.

Да, жалкие 0.2% (данные по Белоруссии) с браузером 12-летней давности так важны)) Странно, что NN3 в списке нет))

 

По второму макету:

• вместо <!--[if IE]> следует написать <!--[if lt IE 9]> или <!--[if lte IE 8]>, т.к. IE9 семантические элементы HTML5 поддерживает.
• Инпуту внизу следует задать type, а в качестве подсказки вместо дефолтного значения использовать атрибут placeholder. Для ие и прочих древностей поддержку плейсхолдера эмулируем скриптом placeholder.js (условные комментарии не нужны, скрипт сам определяет поддержку).

 

Да, я как раз из Белоруссии, так что видимо 0,2 остаются важнее котороткого кода и приятных фич) за плэйсхолдер спасибо, вылетел из головы что-то

[Siela]

Укажу на ошибки первого макета.

1. Фонт лучше задать на боди, а на маин.  Во-вторых фонт нужно задавать основной на странице, что бы если просто вставят текст - он будет в этом стиле. Это уж никак не навигации, в вашем случае скорее всего вот эта часть http://prntscr.com/25k6tx

2. Нету ни одного ховера на ссылках!!! Это очень плохо, если в дизайне не нарисованы ховеры, то делайте андерлайн.  И не нужно на ссылки задавать :visited, если вы его не трогаете, а на ссылки зададите цвет глобально то визитед никак не будет себя проявлять.  Кстати обязательно  должен быть задан дефолтный цвет ссылок для всего сайта. в вашем случае я бы задал такие стили

a{color:#EC8D99;text-decoration:underline;}a:hover{text-decoration:none;}

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

 

3. http://prntscr.com/25k7fg неверная кликабельная область ссылок. Либо задайте марджин вместо паддинга, либо паддинг на li

4. логотип должен быль обязательно кликабельным (заверните в ссылку)

5. коль уж поставили доктайп хтмл5 то будьте добры юзать его. хотя бы вставить теги nav, header, footer, aside. нумаю не нужно обьяснять какой куда)))

6. адрес фирмы нужно засунуть в тег address

7. НЕЕВАЛИДНЫЙ хтмл! проверяйте валидатором и исправляйте ошибки. http://prntscr.com/25kde6 внутри ul должен идти только li, а уже внутри него можно сувать что угодно.

8. http://prntscr.com/25ke0p полоску нужно вырезать одну и вешать не на ul , а на li . У каждой li будет своя полоска. а ну и одну полоску повесить на ul для того что бы установить последнюю полосу (простите за тавтологию)

9. зачем в батон ссылку пихать? либо одно, либо другое http://prntscr.com/25kfhq

10. используйте сокращенные записи http://prntscr.com/25kgdd margin:34px 0 0 300px;

11. этот блок сделан не правильно http://prntscr.com/25kgoq если добавить контента то вот какая фигня получается http://prntscr.com/25kgxn

что бы этого не происходило нужно сделать для .news :  1) вырезать правильно фон (без бордера) 2) задать бордер через цсс. 3)добавить заливку цветом самого нижнего пикселя http://prntscr.com/25ki4o в вашем случае это #B60010 и отменить повторения фонового рисунка. в итоге должно получиться так background:#B60010 url("../img/news.png") no-repeat;    4) убрать высоту и задать overflow:hidden (потому что внутри флотнутые элементы).

12. имага накрыла этот текст http://prntscr.com/25kk57

13. http://prntscr.com/25kkiq нельяза  задавать этот фон на .main-container потому что это фон относится к диву .article http://prntscr.com/25kkud . проблема в том что если вдруг убрать .article получится вот такая лабуда http://prntscr.com/25kl9n

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

в браузерах разных смотреть не буду, думаю с этим сами справитесь

P.S. http://prntscr.com/25kmvs старайтесь не задавать фиксированную высоту, только в случае крайней необходимости. в большинстве случаев можно заменить на min-height

Все исправила, огромнейшее спасибо, некоторые вещи были очевидны и пропустила по невнимательности, но вот например overflow было для меня открытием)

Единственное что не очень поняла на счет тега adress и как сделать кнопку, нажимая на которую переходишь по ссылке? просто оформить как кнопку?

 

А если необходимо чтобы кнопка была сабмит, взяла данные из форм и перешла по ссылке?) или это совсем другая история и js?) 

[Siela]

исправила все с приведенными выше замечаниями) https://googledrive.com/host/0B0mGEhhlwZFAdk1RUm11TWJuUG8/ https://googledrive.com/host/0B0mGEhhlwZFAM1lMSE85ZGpmOXM/

 

теперь ударилась со статичным макетом в ie6,  все что могла поправила, выглядит не ужасно но! центральный блок уезжает вниз под левую колонку( поднимает его только display: inline, но что дальше с получившимся внешним видом делать я не знаю. Понимаю, что большинство здесь 6 презирает, но если вдруг будут профи, умеющие с ним находить общий язык, помогите пожалуйста

Вот как это выглядит https://docs.google.com/file/d/0B0mGEhhlwZFAekJVQi10d3RGN2s/edit?pli=1

и еще нет фоновых картинок сумки и разделительных полос

[SelenIT]

если необходимо чтобы кнопка была сабмит, взяла данные из форм и перешла по ссылке?

Значит, задача либо неверно поставлена, либо недопонята. А вообще аналог адреса ссылки для формы — это её action.

центральный блок уезжает вниз под левую колонку

Блоки float-нутые? Для float-ов в IE6 от этой проблемы часто помогал clear:right для левой колонки.