LINUX.ORG.RU

Использование progressive enhancement и semantic HTML

 progressive enhancement, semantic html, ,


0

1

Всем привет!

Не так давно получил заказ на создание сайта-визитки, дизайн и реализация были оставлены, по большей части, мне на усмотрение, к моей вящей радости (т.к. бывает такое не очень часто). Немного покумекав, решил использовать по максимуму свои знания/наработки по теме прогрессивного улучшения (progressive enhancement) вообще и семантической верстки (semantic HTML) в частности. Также свел к минимуму все использование графики для создания закругленных уголков, градиентов, теней и прочего декора, заменив использующиеся в таких случаях изображения на средства CSS. Прогрессивное улучшение подразумевает еще и корректную работу сайта с выключенным JS, поэтому верстал изначально с учетом этого, не вешая на JS никакого критичного функционала (хотя его и так совсем немного, если честно). Сторонние библиотеки (типа jQuery) подгружаю через гугловый CDN, дабы уменьшить нагрузку на сервер и распараллелить подгрузку скриптов, ну и общий кэш для нескольких сайтов, использующих один и тот же ресурс, никто не отменял. Бэкэнд написал на python/Django, хотя руки чесались использовать flask, но отличная админка Django перевесила все. Вот в общем-то и все.

Есть тут матерые зубры юзабилити/верстки? Был бы рад получить любую критику, советы по улучшению и ссылки на ресурсы по теме, а также описание интересных техник, которые вы используете в своих проектах.

Сам сайт, кому интересно: купи-роквул.рф



Последнее исправление: Boba_Fett (всего исправлений: 1)

Готов пожать руку за кириллические названия разделов в ссылках.

А то http://быдлосайт.рф/catalog/items/2/4/5/itemname.html просто бесит. Если уж решили юзать кириллический домен, то юзать кириллицу до конца

boombick ★★★★★
()

Этот оттенок зелёного цвет трудно читается, как по мне. И буквы какие-то мелковатые, впрочем, это нынче считается нормально.

Deleted
()
Ответ на: комментарий от Deleted

Да, спасибо, я тоже в последнее время смотрю и думаю, что стоит сделать оттенок потемнее и шрифт в таблице побольше.

Boba_Fett
() автор топика

Если честно, (без обид) но дизайн так себе, аля «привет начало 2хтысячных».

Попробуйте цветовую гамму выбрать получше. Поиграйтесь с адобовским кулером http://kuler.adobe.com/#create/fromacolor или повыбирайте там же из уже готовых наборов цветов.

А то сейчас впечатление от сайта ну оочень не очень.. Ещё раз прошу без обид, просто конструктивная критика!

AlOshka
()

Теперь немного по коду. Уже вышла 1.7.2 версия jquery, в которой было исправлено некоторое количество багов, так что просто поменяйте в адресе на cdn гугла «1.7.1» на «1.7.2» соответсвенно.

Html вроде валиден, но так как он ужат, разбираться не стал) А вот по CSS есть замечания..

table.form td.warn textarea{
	border: 1px solid #f60;
	box-shadow: 0 0 3px #f60;
}
.block{
	margin: 15px;
	border-radius: 3px;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
	background: #fff;

	-moz-border-radius: 3px;
	-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
	filter: progid:DXImageTransform.Microsoft.Shadow(color = '#cccccc', Direction = 135, Strength = 2);
}
Что это?? Вы определитесь - вы пишите свойства с вендорными префиксами или без них. Почему в некоторых селекторах используется только -moz- префикс, а в некоторых вообще ниодного? К border-radius'u, box-shadow'u всегда пишите -moz- и -webkit- свойства. Это не занимает много времени. И пишите свойства с префиксами всегда выше(!) оригинального свойства! Почитайте зачем вообще нужны вендорные префиксы и какие могут быть проблемы от их использования. Об этом уже столько раз написано было.

В итоге код выше должен выглядеть так:

table.form td.warn textarea{
	border: 1px solid #f60;
	-webkit-box-shadow: 0 0 3px #f60;
	-moz-box-shadow: 0 0 3px #f60;
	box-shadow: 0 0 3px #f60;
}
.block{
	margin: 15px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
	background: #fff;
	filter: progid:DXImageTransform.Microsoft.Shadow(color = '#cccccc', Direction = 135, Strength = 2);
}

А вообще, мой вам совет, если не уверены в том, как правильно написать, воспользуйтесь http://css3pie.com/ Он напишет css-красивости без ошибок со всеми префиксами в правильном порядке. А если ещё и подключить сам pie для ишака, то всё это будет работать и там.

AlOshka
()
Ответ на: комментарий от AlOshka

Ну, хоть я и не дизайнер, но буду стараться, спасибо )

Boba_Fett
() автор топика

Это топик превосходства linux.org.ru над другими унылыми техническими форумами.

AnDoR ★★★★★
()
Ответ на: комментарий от AlOshka

О, процесс пошел ))

Теперь немного по коду. Уже вышла 1.7.2 версия jquery, в которой было исправлено некоторое количество багов, так что просто поменяйте в адресе на cdn гугла «1.7.1» на «1.7.2» соответсвенно.

Есть такое правило: если работает, то ничего не трогай ) Так вот, работая над одним очень большим и известным порталом мы столкнулись с тем, что из-за регрессии в jQuery (сейчас уже не вспомню в 1.5.x или 1.6.x) поломались некоторые критичные скрипты в определенных моментах, а т.к. разработчиков было несколько, а кода - несколько тысяч строк, то пришлось хорошенько повозиться с отладкой, дабы локализвать проблему. В следующей версии jQuery регрессию пофиксили, но осадок остался. Поэтому, если в скрипте не была закрыта какая-либо критическая проблема, то обновляться ради обовления и гонки за bleeding-edge - порочная практика. Так, небольшой совет, из личного опыта )

Html вроде валиден, но так как он ужат, разбираться не стал)

Ну, если интересно, то всегда есть firebug или вот такой сайт, советую )

Что это?? Вы определитесь - вы пишите свойства с вендорными префиксами или без них

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

И пишите свойства с префиксами всегда выше(!) оригинального свойства!

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

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

Зачем нужны - хорошо знаю, проблему в них вижу только одну: дробление стандарта, т.к. приходится вместо одной строки прописывать десяток -moz-webkit-o-khtml-ms-и т.п. Но не откажусь почитать дельный ресурс по данной теме, если приведете сссылку.

А вообще, мой вам совет, если не уверены в том, как правильно написать, воспользуйтесь http://css3pie.com/

Спасибо, ссылка на полезный ресурс никогда не бывает лишней )

Boba_Fett
() автор топика

Смотрю на верхнюю часть - вижу - печеньки!

Читаю ниже «утеплители». Мдя.

anonymous
()
Ответ на: комментарий от anonymous

Смотрю на верхнюю часть - вижу - печеньки!
Читаю ниже «утеплители». Мдя.

Ну что поделать, если датчане делают утеплитель в виде «печенек»? :((

Boba_Fett
() автор топика
Ответ на: комментарий от AnDoR

Это топик превосходства linux.org.ru над другими унылыми техническими форумами.

Сайт-визитка, пара баззвордов, и школоаудитория ЛОРа твоя.

anonymous
()
Ответ на: комментарий от anonymous

Сайт-визитка, пара баззвордов, и школоаудитория ЛОРа твоя.

Ну, если бы все же прошли по ссылке и взглянули как на js, так и на html, вы бы поняли, что за этими «баззвордами» стоят некоторые интересные приемы )

P.S. с удовольствием посмотрю на ресурс с «нешколоаудиторией», без «баззвордов» и с дельными примерами, если конечно есть что показать.

Boba_Fett
() автор топика

Бэкэнд написал на python/Django, хотя руки чесались использовать flask, но отличная админка Django перевесила все

на будущее: админку джанго можно прикрутить к чему угодно, я сам пишу много на flask и иногда туда прикрепляю админку от django. Более того, админка от django можно прикрутить и к php-движкам, в частности к Wordpress, PHPBB, etc.

Все что нужно сделать - описать бд - что, в общем-то делается < часа.

anonymous
()
Ответ на: комментарий от anonymous

админку джанго можно прикрутить к чему угодно, я сам пишу много на flask и иногда туда прикрепляю админку от django.

Здорово, а можно где-либо почитать о данном процессе?

Более того, админка от django можно прикрутить и к php-движкам, в частности к Wordpress, PHPBB, etc.

Что-то у меня закрадываются смутные сомнения в возможности и, самое главное, целесообразности данного действа.

P.S. автоматический маппинг ORM'а на админке работать будет?

Все что нужно сделать - описать бд

Или все же не будет?.. Зачем тогда собирать велосипед из деталей от самоката, если рядом есть полноценное решение?

Boba_Fett
() автор топика
Ответ на: комментарий от Boba_Fett

Здорово, а можно где-либо почитать о данном процессе?

гугл пестрит ссылками: http://geekscrap.com/2010/02/integrate-wordpress-and-django/ и http://agiliq.com/blog/2010/01/wordpress-and-django-best-buddies/ еще и code.google.com/p/django-wordpress-admin/

Что-то у меня закрадываются смутные сомнения в возможности и, самое главное, целесообразности данного действа.

кому-то просто удобнее юзать админку от django для редактирования/удаления контента, чем встроенное в wordpress/phpbb/etc ...

Зачем тогда собирать велосипед из деталей от самоката, если рядом есть полноценное решение?

приложение - отдельно, админка (которая отвечает за редактирование контента в бд) - отдельно. Где тут самокат?

Я хотел сказать, что не стоит выбирать django, только из-за ее админки.

anonymous
()
Ответ на: комментарий от anonymous

гугл пестрит ссылками

Мне гораздо интереснее интеграция flask и админки Django, возможно есть хорошие, толковые ресурсы, которыми вы можете поделиться?

Я хотел сказать, что не стоит выбирать django, только из-за ее админки.

У Django есть очень много всего вкусного, помимо админки. Просто сама идеология flask'а мне ближе, но его целесообразнее использовать для небольших, либо полностью самостоятельных и нешаблонных проектов, где стандартные решения того же Django будут создавать неудобства и лишь мешать. Там же, где все работает и так, предпочитаю использовать тот инструмент, который замечательно подходит, рационально и без лишних манипуляций (ну, лень мне, каюсь)). И в данном конкретном случае (как и в многих других), Django со своей админкой - самый удобный вариант с минимумом лишний действий.

Boba_Fett
() автор топика
Ответ на: комментарий от mio

Но предлагаю использовать как то фирменные цвета - белое на красном.

Да, можно будет попробовать, поэксперементирую, спасибо )

Boba_Fett
() автор топика
Ответ на: комментарий от mio

Попробовал я белое с красным: это уже какй-то Oracle получается. Брр!

P.S. жду дельных советов )

Boba_Fett
() автор топика

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

P.S. спасибо Mystra_x64 за подсказку по юзабилити, AlOshka за дельные ссылки и анонимному пользователю за найденную опечатку.

Boba_Fett
() автор топика
11 июля 2012 г.
Ответ на: комментарий от SI

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

shrub ★★★★★
()
Ответ на: комментарий от SI

хотя бы html код сделайте читабельным.

Firebug? Не не слышал XD

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

Boba_Fett
() автор топика

Кстати, появилось подозрение, что интерфейс Яндекс.карт не дружелюбен к touch-девайсам. В частности возможны проблемы с зумом карты на таких устройствах. Кто-нибудь может проверить? Ссылка на страницу с картой.

Boba_Fett
() автор топика
Ответ на: комментарий от Boba_Fett

Шутишь чтоли? Там 6 кб и на сайт этот ходят полтора анона на две минуты, какая нафиг оптимизация скокрости загрузки? Не стоило заморачиваться такой ерундой.

Kalashnikov ★★★
()
Ответ на: комментарий от Kalashnikov

Там 6 кб и на сайт этот ходят полтора анона на две минуты, какая нафиг оптимизация скокрости загрузки?

Ну, там «6 кб» именно потому, что была проведена масштабная оптимизация: отказ от загрузки лишних изображений в пользу css, оптимизация размера самих изображений, использование CDN для параллельной подгрузки скриптов и да, сжатие html. Мне не затратно, а для всех (заказчик, пользователи, хостер) - лучше. Почему нет, собственно? )

Не стоило заморачиваться такой ерундой.

Если сделать что-либо как надо для тебя - «заморачиваться ерундой», то я бы не стал к тебе обращаться, будь я заказчиком ;)

Boba_Fett
() автор топика
Ответ на: комментарий от Boba_Fett

Кстати, тут один добрый человек создал админку для flask'а. В качестве интерфейса используется Twitter Bootstrap. Выглядит вкусно и можно использовать в качестве гибкой и легковесной замены Django с его админкой.

Boba_Fett
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.