Jump to content

Оцените сайт


jazzic
 Share

Recommended Posts

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

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

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

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

  • Like 1
Link to comment
Share on other sites

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

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

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

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

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

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

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

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

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

  • Like 1
Link to comment
Share on other sites

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

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

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

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

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

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

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

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

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

  • Like 1
Link to comment
Share on other sites

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Edited by jazzic
Link to comment
Share on other sites

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

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

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

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

  • Like 1
Link to comment
Share on other sites

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

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

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

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

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

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

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

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Like 1
Link to comment
Share on other sites

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

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

У Вас есть файлы 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 можно использовать уникальный класс*/

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

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

e56770c3263ft.jpg

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

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

Edited by red4pony
  • Like 1
Link to comment
Share on other sites

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

Вот:


<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 украсите их как хотите.

  • Like 1
Link to comment
Share on other sites

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

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

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

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

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

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

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

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

  • Like 1
Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

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

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

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

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

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

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

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

Edited by jazzic
Link to comment
Share on other sites

теперь нужно

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

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

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

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

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

Edited by jazzic
Link to comment
Share on other sites

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

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By 333
      Добрый день, Влад! Наткнулась на Ваш форум и нашла нужную литературу благодаря Вам. Но доступ стал закрыт. Зарегистрировалась и стала вашим подписчиком. Могу ли я получить доступ?
      По HTML вот эту
      https://webref.ru/layout/howtocodeinhtml
      потом эту
      https://webref.ru/layout/html5-css3
      и эту
      https://webref.ru/layout/diveintohtml5
    • By sashakee
      Всем доброго времени суток!
      Раньше увлекался версткой, но пришлось бросить это занятие из-за обстоятельств.
      Спустя некоторое время изучал движки. Теперь вот опять вернулся к верстке т.к хочу научится профессионально верстать и натягивать шаблоны на cms.
      Тут буду выкладывать свою поке еще корявую верстку, Ну а вы если можете помочь советом, указать на недочеты или как сделать все более проще - то пожалуйста пишите!
      Вот я эту простоту целый день делал http://www.cosremos....nes1/index.html
      Вроде все получилось, но чувствую верстка с недочетами.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy