Покритикуйте. Только начал работу в этой сфере

yafilip · March 24, 2012

http://yafilip.comuf.com

Вот собственно сам сайт. Жду критику и рекомендации, пожалуйста.

NeoXidizer · March 24, 2012

Смотрю только техническое исполнение:

1. В сайдбаре к textarea добавьте css атрибуты { overflow: auto; resize:none; }, таким образом уберется скроллбар в IE и кнопка ресайзинга в WebKit браузерах

2. Не используйте изображения большого размера, если они "сжимаются" на странице - ваше лого в оригинале 1181 ? 788 - 35кб, нужно уменьшить размер, например пропорционально обрезав в фотошопе

3. Вы используете тег <br\> там, где нужен отступ от элемента - margin

4. Укажите для кнопки Send it css атрибут cursor:pointer;, чтобы показать, что эта кнопка совершает действие и на нее необходимо нажать

5. Оберните пояснения к полям в <label>

например:

E-mail: <input type="text" class="field" id="email" name="email" />

преобразуется в

<label for="email">E-mail: </label><input type="text" class="field" id="email" name="email" />

6. Укажите для label атрибут cursor:pointer; (хотя зависит от дизайна и "кому как нравится")

7. Не используйте глобальный селектор, это плохо сказывается на скорости рендинга (прорисовки) страницы, особенно если много контента, замените

* { margin: 0; padding: 0; }

на

html,body,div,p,a,img,header,nav,ul,li,aside,h1,form,label,input,textarea,section,footer {margin:0;padding:0}

дополняя элементами по мере наполнения страницы

8. Замените

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

на

<meta charset="utf-8" />

и поместите этот код сразу после открытия <head>

8. Добавьте HTML5 Shiv скрипт для поддержки IE<9 http://code.google.com/p/html5shiv/

Edited March 24, 2012 by NeoXidizer

yafilip · March 24, 2012

Смотрю только техническое исполнение:
1. В сайдбаре к textarea добавьте css атрибуты { overflow: auto; resize:none; }, таким образом уберется скроллбар в IE и кнопка ресайзинга в WebKit браузерах
2. Не используйте изображения большого размера, если они "сжимаются" на странице - ваше лого в оригинале 1181 ? 788 - 35кб, нужно уменьшить размер, например пропорционально обрезав в фотошопе
3. Вы используете тег <br\> там, где нужен отступ от элемента - margin
4. Укажите для кнопки Send it css атрибут cursor:pointer;, чтобы показать, что эта кнопка совершает действие и на нее необходимо нажать
5. Оберните пояснения к полям в <label>
например:
E-mail: <input type="text" class="field" id="email" name="email" />
преобразуется в
<label for="email">E-mail: </label><input type="text" class="field" id="email" name="email" />
6. Укажите для label атрибут cursor:pointer; (хотя зависит от дизайна и "кому как нравится")
7. Не используйте глобальный селектор, это плохо сказывается на скорости рендинга (прорисовки) страницы, особенно если много контента, замените
* { margin: 0; padding: 0; }
на
html,body,div,p,a,img,header,nav,ul,li,aside,h1,form,label,input,textarea,section,footer {margin:0;padding:0}
дополняя элементами по мере наполнения страницы
8. Замените
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
на
<meta charset="utf-8" />
и поместите этот код сразу после открытия <head>
8. Добавьте HTML5 Shiv скрипт для поддержки IE<9 http://code.google.com/p/html5shiv/

спасибо большое, хорошие замечания, все свои ошибки понял, исправлю!

Chuv · March 25, 2012

Весьма неплохо для начинающего. Кроме тех моментов что уже указал NeoXidizer, хочу добавить что тег nav тем и удобен что нет необходимости плодить ul-li - пишите просто:

<nav> 
    <a href="#">...</a>
    <a href="#">...</a>
    <a href="#">...</a>
    <a href="#">...</a>
</nav>

Ну и если добавить HTML5 Shiv вместе с PIE будет и в ослах все замечательно

buddah · March 25, 2012

хочу добавить что тег nav тем и удобен что нет необходимости плодить ul-li - пишите просто:
<nav> 
    <a href="#">...</a>
    <a href="#">...</a>
    <a href="#">...</a>
    <a href="#">...</a>
</nav>

Это не правда.

NeoXidizer · March 25, 2012

хочу добавить что тег nav тем и удобен что нет необходимости плодить ul-li - пишите просто:
<nav> 
    <a href="#">...</a>
    <a href="#">...</a>
    <a href="#">...</a>
    <a href="#">...</a>
</nav>
Это не правда.

Там ничего не сказано про то, как оформлять ссылки внутри <nav>.

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

В то же время новый тег <nav> позволяет размещать в нем ссылки и не оборачивать их в что-либо, они изначально будут размещены горизонтально, а уж если нужно вертикальное меню, то действительно можно сделать список ссылок, который будет изображаться вертикально (хотя и обычные ссылки можно разсместить вертикально)

Chuv · March 25, 2012

Это не правда.

Okay... http://htmlbook.ru/html/nav - вот хотя бы с данного сайта описание.

ablay2009 · March 25, 2012

Два замечания:

1) кодировка указывается сразу после открывающего <head>

2) ID.. Используйте классы [вот только не надо опять холивар начинать "id vs. class"]

buddah · March 25, 2012

NeoXidizer, Chuv, в nav могут быть другие теги типа заголовков, других ссылок, блоков и т.д. Неужели семантично пихать все это в кучу? Поправьте меня, возможно я что-то упустил.

В любом случае я всегда пихаю ul li в nav. Возможно и делаю лишнюю работу.

Chuv · March 25, 2012

Нет. В nav не могут быть "другие теги типа заголовков, других ссылок, блоков и т.д". Многие источники четко дают понять: nav - контейнер для ссылок навигации по сайту.

nav сам за себя говорит что оно - навигация. Дополнительно делать разметку со списком нет никакого смысла.

Edited March 25, 2012 by Chuv

buddah · March 25, 2012

Нет. В nav не могут быть "другие теги типа заголовков, других ссылок, блоков и т.д". Многие источники четко дают понять: nav - контейнер для ссылок навигации по сайту

Наша песня хороша, начинай сначала

Внимательно смотрите примеры из спеки.

Жаль товарища SelenIT'a нету, он лучше всех в семантике и спецификациях разбирается.

Chuv · March 25, 2012

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

Edited March 25, 2012 by Chuv

NeoXidizer · March 25, 2012

http://dev.w3.org/html5/spec/the-nav-element.html#the-nav-element

а здесь в примерах:

A nav element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose:

<nav>
 <h1>Navigation</h1>
 <p>You are on my home page. To the north lies <a href="/blog">my
 blog</a>, from whence the sounds of battle can be heard. To the east
 you can see a large mountain, upon which many <a
 href="/school">school papers</a> are littered. Far up thus mountain
 you can spy a little figure who appears to be me, desperately
 scribbling a <a href="/school/thesis">thesis</a>.</p>
 <p>To the west are several exits. One fun-looking exit is labeled <a
 href="http://games.example.com/">"games"</a>. Another more
 boring-looking exit is labeled <a
 href="http://isp.example.net/">ISP™</a>.</p>
 <p>To the south lies a dark and dank <a href="/about">contacts
 page</a>. Cobwebs cover its disused entrance, and at one point you
 see a rat run quickly out of the page.</p>
</nav>

Потому что без разницы, как оформлять меню. На html5doctor ничего не сказано, как должен оформляться контент внутри <nav> тега, там просто приведены примеры, где для оформления используется <ul> список.

Ведь меню навигации бывает разным - в виде списка, например в сайдбаре, и в виде toolbar'а - горизонтально расположенных элементов, а в таких случаях использование списока (<ul>) просто не логично

troll · March 26, 2012

toolbar'а - горизонтально расположенных элементов, а в таких случаях использование списока (<ul>) просто не логично

Почему?

yafilip · March 26, 2012

Весьма неплохо для начинающего. Кроме тех моментов что уже указал NeoXidizer, хочу добавить что тег nav тем и удобен что нет необходимости плодить ul-li - пишите просто:
<nav> 
    <a href="#">...</a>
    <a href="#">...</a>
    <a href="#">...</a>
    <a href="#">...</a>
</nav>
Ну и если добавить HTML5 Shiv вместе с PIE будет и в ослах все замечательно

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

Вернее понимаю, через #top_navigator a {}, но удобнее было через li, т.к. кнопки прыгают по панеле сейчас как сумасшедшие )

Edited March 26, 2012 by yafilip

NeoXidizer · March 26, 2012

просто через #top_navigator a { margin-left: 80px;}

nightgremlin · March 27, 2012

Нет. В nav не могут быть "другие теги типа заголовков, других ссылок, блоков и т.д". Многие источники четко дают понять: nav - контейнер для ссылок навигации по сайту.
nav сам за себя говорит что оно - навигация. Дополнительно делать разметку со списком нет никакого смысла.
Сообщение отредактировал Chuv: 25 Март 2012 - 17:42

Я полагаясь на другие примеры вот, что написал про этот элемент: http://www.sdcvoy.ru/html5/nav_html5.php

yafilip · March 27, 2012

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

Sign In

Покритикуйте. Только начал работу в этой сфере

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information