Оцените сайт

[jazzic]

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

piano-play.com

что удобно / не удобно

бросается в глаза

и т.д.

спасибо)

[red4pony]

Сделайте логотип кликабельным.

Кнопки социальных сетей - немного отодвиньте от основного блока / разместите внизу / сделать под общую цветовую композицию.

Сделайте выделение кнопки соответстующей активной странице (чтобы знать где находится пользователь)

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

[jazzic]

Ок. к логотипу сделаю ссылку.

По поводу кнопок - отодвинем. Если уберу кнопки социальных сетей в нижнюю часть, не будет ли казаться что верхняя часть сайта пустая?

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

Сейчас проверял скорость сайта, так на одной из страниц она вообще 20 очков из 100 составляет, ужас.

мерял здесь - https://developers.google.com/speed/pagespeed/insights#url=piano-play.com&mobile=false&rule=DeferParsingJavascript

Кстати, вас не кажется, что плавная подзагрузка страницы - это не гуд?

  On 5/11/2013 at 8:30 AM, red4pony said:

Сделайте логотип кликабельным.

Кнопки социальных сетей - немного отодвиньте от основного блока / разместите внизу / сделать под общую цветовую композицию.

Сделайте выделение кнопки соответстующей активной странице (чтобы знать где находится пользователь)

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

[red4pony]

  On 5/11/2013 at 8:37 AM, jazzic said:

По поводу кнопок - отодвинем. Если уберу кнопки социальных сетей в нижнюю часть, не будет ли казаться что верхняя часть сайта пустая?

Привычка, что сайты по бокам захламлены рекламой? Если Вам будет комфортнее, сделайте небольшой арнамент из нот.

  On 5/11/2013 at 8:37 AM, jazzic said:

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

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

  On 5/11/2013 at 8:37 AM, jazzic said:

Кстати, вас не кажется, что плавная подзагрузка страницы - это не гуд?

Я считаю что в данном случае она уместна. (хоть и противоречит "общему" мнению)

[Daiver]

Первым делом бросились в глаза адреса страниц.

К примеру http://piano-play.com/transcriptions.html

Создайте папку с названием transcriptions и сделайте адрес вида http://piano-play.com/transcriptions/, используя в каждой папке файл index.html

Что общего между instructions, about и faq?

Если это раздел faq, то так и назовите его как в меню, так и страницу, чтобы и в адресе не было не соответствий.

Если есть отдельная страница order, то для чего эту же форму вставлять на страницу transcribing?

На главной странице блоки "What is it?" и "Lifetime" слиты воедино. Нужно добавить расстояние.

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

Исправить ошибки

[jazzic]

  On 5/11/2013 at 8:52 AM, red4pony said:

Привычка, что сайты по бокам захламлены рекламой? Если Вам будет комфортнее, сделайте небольшой арнамент из нот.

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

  On 5/11/2013 at 8:52 AM, red4pony said:

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

По поводу звуков- отличная идея! Сделаем. Уже инструкцию нашел - http://raftkorn.com/...atii-na-ssylku/

  Quote

Я считаю что в данном случае она уместна. (хоть и противоречит "общему" мнению)

Ок, но почему-то тормозит сайт заметно

  On 5/11/2013 at 8:53 AM, Daiver said:

Первым делом бросились в глаза адреса страниц. К примеру http://piano-play.co...scriptions.html Создайте папку с названием transcriptions и сделайте адрес вида http://piano-play.com/transcriptions/, используя в каждой папке файл index.html

Почему бросились в глаза? Это стандарт такой?

  On 5/11/2013 at 8:53 AM, Daiver said:

Что общего между instructions, about и faq? Если это раздел faq, то так и назовите его как в меню, так и страницу, чтобы и в адресе не было не соответствий.

Как вы это заметили??? Знал только я об этом!))

  On 5/11/2013 at 8:53 AM, Daiver said:

Если есть отдельная страница order, то для чего эту же форму вставлять на страницу transcribing?

Вы правы, хочу убрать полностью страницу order и там и там. Сделать что-то -типа кнопки сверху (transcribing). Вы мне с той страницей помогли.

  On 5/11/2013 at 8:53 AM, Daiver said:

На главной странице блоки "What is it?" и "Lifetime" слиты воедино. Нужно добавить расстояние.

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

  On 5/11/2013 at 8:53 AM, Daiver said:

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

Да.. над этим не задумывался. Хочу еще уменьшить количество кнопок и сделать выпадающие.

  On 5/11/2013 at 8:53 AM, Daiver said:

Исправить ошибки

Как понять на каких именно страницах та или иная ошибка?

Edited May 11, 2013 by jazzic

[nerv]

не понятно на какой именно странице нахожусь

[red4pony]

  On 5/11/2013 at 9:08 AM, jazzic said:

нужно убрать.

Не стоит. Оставьте Twitter и Facebook (сайт англоязычный, ближе к контингенту), а всякие Вконтакте и Одноклассники сидят на другой музыке (никого не хочу обидеть). Кнопки Twitter и Facebook разместите внизу, сделайте их серыми и круглыми, а при наведении голубыми/синими (их родной ) цвет. Думаю будет отлично смотреться.

Можно для <body> задать background-color: #ccc (что-то в этом духе). Тогда сливается нижняя граница белых клавиш с фоном (добавьте границу на изображении).

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

[jazzic]

  On 5/11/2013 at 9:29 AM, nerv said:

не понятно на какой именно странице нахожусь

Выделение кнопок делать не хочу т.к.:

1) Не представляю как это сделать (меню брал из шаблона)

2) Дизайн немного изменит (хотя может будет все хорошо)

  On 5/11/2013 at 9:34 AM, red4pony said:

Не стоит. Оставьте Twitter и Facebook (сайт англоязычный, ближе к контингенту), а всякие Вконтакте и Одноклассники сидят на другой музыке (никого не хочу обидеть). Кнопки Twitter и Facebook разместите внизу, сделайте их серыми и круглыми, а при наведении голубыми/синими (их родной ) цвет. Думаю будет отлично смотреться.

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

Я видел только (пример с большими серыми кнопками, когда их делают с ссылками на существующие страницы своего сервиса.

  On 5/11/2013 at 9:34 AM, red4pony said:

Можно длязадать background-color: #ccc (что-то в этом духе). Тогда сливается нижняя граница белых клавиш с фоном (добавьте границу на изображении).

Про фон - интересно, сделаю. А что за граница на изображении? Рамка таблицы?

  On 5/11/2013 at 9:34 AM, red4pony said:

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

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

[Daiver]

  On 5/11/2013 at 9:18 AM, jazzic said:

  Quote

Я считаю что в данном случае она уместна. (хоть и противоречит "общему" мнению)

Ок, но почему-то тормозит сайт заметно

Ошибки валидации тоже могут притормаживать загрузку сайта.

  On 5/11/2013 at 9:18 AM, jazzic said:

  On 5/11/2013 at 8:53 AM, Daiver said:

Первым делом бросились в глаза адреса страниц. К примеру http://piano-play.co...scriptions.html Создайте папку с названием transcriptions и сделайте адрес вида http://piano-play.com/transcriptions/, используя в каждой папке файл index.html

Почему бросились в глаза? Это стандарт такой?

Нет, но считается устаревшим стилем.

  On 5/11/2013 at 9:18 AM, jazzic said:

  On 5/11/2013 at 8:53 AM, Daiver said:

Что общего между instructions, about и faq? Если это раздел faq, то так и назовите его как в меню, так и страницу, чтобы и в адресе не было не соответствий.

Как вы это заметили??? Знал только я об этом!))

Мой девиз - "Искать и не сдаваться. Найти и пристебаться."

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

  On 5/11/2013 at 9:18 AM, jazzic said:

  On 5/11/2013 at 8:53 AM, Daiver said:

На главной странице блоки "What is it?" и "Lifetime" слиты воедино. Нужно добавить расстояние.

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

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

  On 5/11/2013 at 9:18 AM, jazzic said:

  On 5/11/2013 at 8:53 AM, Daiver said:

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

Да.. над этим не задумывался. Хочу еще уменьшить количество кнопок и сделать выпадающие.

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

  On 5/11/2013 at 9:18 AM, jazzic said:

  On 5/11/2013 at 8:53 AM, Daiver said:

Исправить ошибки

Как понять на каких именно страницах та или иная ошибка?

Все приведенные ошибки только на главной. Вообще желательно все страницы прогнать через валидатор.

[red4pony]

  On 5/11/2013 at 9:58 AM, jazzic said:

Не представляю как это сделать (меню брал из шаблона)

Можно вот так:

  Reveal hidden contents

У Вас есть файлы index.html - соответствует странице home

transcriptions.html - страница Transcriptions

order.html - страница Order

about.html - страница Instructions

samples.html - страница Sample

transcribe.html - страница Transcribing

news.html - страница News

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

Для страницы index.html в <body id = "homePage">

Для страницы transcriptions.html в <body id = "transcriptionsPage">

Для страницы order.html в <body id = "orderPage">

Для страницы about.html в <body id = "instructionsPage">

Для страницы samples.html в <body id = "samplesPage">

Для страницы transcribe.html в <body id = "transcribePage">

Для страницы news.html в <body id = "newsPage">

Теперь меню:

Пункт меню "Номе" - <li id ="buttonHome">

Пункт меню "Transcriptions" - <li id ="buttonTranscription">

Пункт меню "Order" - <li id ="buttonOrder">

Пункт меню "Instructions" - <li id ="buttonAbout">

Пункт меню "Sample" - <li id ="buttonSample">

Пункт меню "Transcribing" - <li id ="buttonTranscribing">

Пункт меню "News" - <li id ="buttonNews">

В файле CSS пропишите следующее:

#homePage #buttonHome>a, /*Запись говорит о том что если на странице будет найдена кнопка которая вызвала данную страницу, то она покрасится в серый цвет*/
#transcriptionsPage #buttonTranscription>a,
#orderPage #buttonOrder>a,
#instructionsPage #buttonAbout>a,
#samplesPage #buttonSample>a,
#transcribePage #buttonTranscribing>a,
#newsPage #buttonNews>a{
	background-color: #333;/*цвет взял для примера, подберите другой*/
	color:#fff;
} /*вместо id можно использовать уникальный класс*/

  On 5/11/2013 at 9:58 AM, jazzic said:

А что за граница на изображении?

Граница между клавишами и фоном исчезает:

Подрисуйте её в любом графическом редакторе цветом, который разделяет белые клавиши.

P.S. Подправил свойства CSS

Edited May 11, 2013 by red4pony

[red4pony]

  On 5/11/2013 at 9:58 AM, jazzic said:

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

Вот:

  Reveal hidden contents

<a target="_blank" title="Share on Facebook" onclick="window.open('http://www.facebook.com/sharer.php?u=http%3A%2F%2Fpiano-play.com%2Fnews.html&t=Recently%20Transcribed%20Pieces%3A%20Erroll%20Garner%20transcriptions%2C%20Play%2C%20Piano%2C%20Play%2C%20Herbie%20Hancock%20transcriptions%2C%20Gaslight%2C%20Turquoise%2C%20Don%27t%20be%20that%20way', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=200, top=200, width=550, height=440, toolbar=0, status=0');return false" href="#" rel="nofollow">f</a>
<a target="_blank" title="Share on Twitter" onclick="window.open('http://twitter.com/share?text=Recently%20Transcribed%20Pieces%3A%20Erroll%20Garner%20transcriptions%2C%20Play%2C%20Piano%2C%20Play%2C%20Herbie%20Hancock%20transcriptions%2C%20Gaslight%2C%20Turquoise%2C%20Don%27t%20be%20that%20way&url=http%3A%2F%2Fpiano-play.com%2Fnews.html', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=200, top=200, width=550, height=440, toolbar=0, status=0');return false" href="#" rel="nofollow">t</a>

Первое это кнопка для Facebook (в <a> вложена буква "f"), вторая для Twitter (ситуация аналогичная). С помощью CSS украсите их как хотите.

[jazzic]

  On 5/11/2013 at 10:39 AM, Daiver said:

Ошибки валидации тоже могут притормаживать загрузку сайта.

52 ошибки только на 1-й странице! это ужас!) я застряну перед компьютером навечно

но спасибо, для индексации это, вероятно, очень важно

  On 5/11/2013 at 10:39 AM, Daiver said:

Нет, но считается устаревшим стилем.

ок, попытаемся исправить

  On 5/11/2013 at 10:39 AM, Daiver said:

Мой девиз - "Искать и не сдаваться. Найти и пристебаться." Лучше пусть я вам сейчас укажу на не заметные обычному пользователю недочеты, чем потом поисковик ваш сайт будет выдавать в конце поисковой выдачи.

На самом деле у меня это актуальная проблема. Посетители путаются. Исправим-с

  On 5/11/2013 at 10:39 AM, Daiver said:

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

Из-за ошибок и наличия нескольких css пока этого не получается сделать. Тоже справим.

  On 5/11/2013 at 10:39 AM, Daiver said:

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

Я сделал этот блок с надеждой в лучшую индексацию. Похожая страница с музыкантами уже есть http://piano-play.com/transcriptions.html

[Daiver]

  On 5/11/2013 at 11:33 AM, jazzic said:

52 ошибки только на 1-й странице! это ужас!) я застряну перед компьютером навечно

Не думаю. Там однотипные ошибки. Достаточно понять как исправить 5-7 ошибок, а все остальные будут решатся по шаблону. Больше 2 дней на весь сайт не должно занять.

Кстати на счет css - там много ошибок из-за использования тегов и атрибутов, которые уже не вошли в спецификацию HTML5 и вместо них нужно использовать css.

А еще для исправления ошибок будет полезно почитать о meta тегах и их атрибутах.

[jazzic]

  On 5/11/2013 at 10:54 AM, red4pony said:

Граница между клавишами и фоном исчезает: Подрисуйте её в любом графическом редакторе цветом, который разделяет белые клавиши.

Фон уже исправил на белый, как было задумано заранее. Вот что получилось - http://piano-play.com/. Изменился он случайно при добавлении другого кода в css.

Про выделение кнопок меню в цвет. Принцип понял, но при добавлении id в меню и необходимого кода в css ничего не изменилось.

За код с кнопками (facebook, twitter) благодарю. Скопировал себе, на днях добавлю кнопки, спасибо.

[Daiver]

  On 5/11/2013 at 11:33 AM, jazzic said:

Я сделал этот блок с надеждой в лучшую индексацию.

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

[jazzic]

  On 5/11/2013 at 11:59 AM, Daiver said:

Не думаю. Там однотипные ошибки. Достаточно понять как исправить 5-7 ошибок, а все остальные будут решатся по шаблону. Больше 2 дней на весь сайт не должно занять. Кстати на счет css - там много ошибок из-за использования тегов и атрибутов, которые уже не вошли в спецификацию HTML5 и вместо них нужно использовать css. А еще для исправления ошибок будет полезно почитать о meta тегах и их атрибутах

Заметил, что ошибки однотипные, так-то проще! Прочитал про теги, спасибо

  On 5/11/2013 at 12:05 PM, Daiver said:

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

Что означает под отдельный ключ? Т.е. описание страниц не должно совпадать?

[Daiver]

  On 5/11/2013 at 12:09 PM, jazzic said:

  On 5/11/2013 at 12:05 PM, Daiver said:

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

Что означает под отдельный ключ? Т.е. описание страниц не должно совпадать?

Ключ = поисковая фраза.

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

[jazzic]

Хотел написать, но забывал.

Есть такая проблема, что бегущая строка воспроизводится лишь только при отсутствии описания страницы "<!DOCTYPE html>

А это описание страницы просто неоходимо для лучшей индексации.

Проблемная страница - http://piano-play.com/news.html

  On 5/11/2013 at 12:18 PM, Daiver said:

  On 5/11/2013 at 12:09 PM, jazzic said:

  On 5/11/2013 at 12:05 PM, Daiver said:

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

Что означает под отдельный ключ? Т.е. описание страниц не должно совпадать?

Ключ = поисковая фраза.

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

Идею понял, исправлю.

[red4pony]

  On 5/11/2013 at 12:04 PM, jazzic said:

при добавлении id в меню и необходимого кода в css ничего не изменилось.

Видимо допустили ошибку.

Вот пример http://jsfiddle.net/EpvgZ/

Уберете идентификатор у <body> - работать не будет.

[jazzic]

  On 5/11/2013 at 12:44 PM, red4pony said:

Видимо допустили ошибку. Вот пример http://jsfiddle.net/EpvgZ/ Уберете идентификатор у- работать не будет.

Вот, что получилось http://piano-play.com/index5.html

Идея хорошая. Теперь буду думать над лучшим испонением и дизайном.

Кстати, спасибо)

  On 5/11/2013 at 11:59 AM, Daiver said:

Не думаю. Там однотипные ошибки. Достаточно понять как исправить 5-7 ошибок, а все остальные будут решатся по шаблону.

Заметил, что на сайте валидаторе пишут, что выравнивание элементов в таблице лучше проводить через css.

Или: "The align attribute on the table element is obsolete. Use CSS instead."

http://validator.w3....w3.org/services

Т.е. теперь нужно переписать весь сайт только из-за того, что использование выравнивания в таблицах не актуально?

Edited May 11, 2013 by jazzic

[red4pony]

  On 5/11/2013 at 12:59 PM, jazzic said:

теперь нужно

Это носит рекомендательный характер.

Многие( в том числе и валидатор) придерживаются мнения, что всё визуальное офрмление должно находиться в CSS. Делайте так чтобы Вам и другим людям(если таковые есть/будут) удобно было поддерживать сайт.

[Daiver]

  On 5/11/2013 at 12:59 PM, jazzic said:

Т.е. теперь нужно переписать весь сайт только из-за того, что использование выравнивания в таблицах не актуально?

Нет. В HTML5 атрибут align у таблиц отсутствует. Вместо этого используйте стили css.

[jazzic]

  On 5/11/2013 at 1:07 PM, Daiver said:

  On 5/11/2013 at 12:59 PM, jazzic said:

Т.е. теперь нужно переписать весь сайт только из-за того, что использование выравнивания в таблицах не актуально?

Нет. В HTML5 атрибут align у таблиц отсутствует. Вместо этого используйте стили css.

Отсутствует? Но у меня же все работает?)

  On 5/11/2013 at 1:06 PM, red4pony said:

Это носит рекомендательный характер. Многие( в том числе и валидатор) придерживаются мнения, что всё визуальное офрмление должно находиться в CSS. Делайте так чтобы Вам и другим людям(если таковые есть/будут) удобно было поддерживать сайт.

Кстати, я тоже об этом минут 10 сегодня думал. Почему лучше не ставить оформление на странице сайта, а добавлять его через css?

Edited May 11, 2013 by jazzic

[red4pony]

  On 5/11/2013 at 1:15 PM, jazzic said:

Кстати, я тоже об этом минут 10 сегодня думал. Почему лучше не ставить оформление на странице сайта, а добавлять его через css?

HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») - создан для лагоческого разделения текста.

CSS (Cascading Style Sheets — каскадные таблицы стилей) создали для того чтобы хранить все оформление в одном месте, это делает код опрятнее и повышается удобочитаемость.

Align отсутствует в HTML5 по причине того что WHATWG и W3C хотят полностью удалить теги оформления из HTML, чтобы все переложить обязанности оформления на CSS. Исправляют свои ошибки.

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