Форум программистов «Весельчак У»
  *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

  • Рекомендуем проверить настройки временной зоны в вашем профиле (страница "Внешний вид форума", пункт "Часовой пояс:").
  • У нас больше нет рассылок. Если вам приходят письма от наших бывших рассылок mail.ru и subscribe.ru, то знайте, что это не мы рассылаем.
   Начало  
Наши сайты
Помощь Поиск Календарь Почта Войти Регистрация  
 
Страниц: [1]   Вниз
  Печать  
Автор Тема: Осторожная попытка применения html5+css3 на практике.  (Прочитано 11985 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Золотая Лань
Молодой специалист

ru
Offline Offline
Пол: Женский

« : 07-04-2010 22:42 » 

в кои-то веки попался нам адекватный и вменяемый заказчик, который не предъявлял никаких дурацких требований, не ползал с линейкой по монитору, выверяя строгую идентичность макету во всех ему известных браузерах. Этот заказчик руководствовался исключительно соображениями здравого смысла. Вот как бывает.
И захотелось такому заказчику сделать что получше. В том числе и о красоте кода позаботились. И в какой-то момент возникла мысль: «а не переверстать ли на html5?».

Сказано — сделано. Вот что получилось:
h**p://homeadvokat.ru/

На самом деле сайт до сих пор ещё в стадии разработки, а потому живёт на тестовом домене, имеет местами ненаполненные страницы, картинку вместо счётчика, один недовёрстанный шаблон компонента (в новостях) и маленький косячок в виде резкого перепада цвета в ссылках основного меню по краю иконок.
Но основная часть работы выполнена, шаблоны свёрстаны в html5, оформлены средствами css3.

Никаких сверхнавороченных возможностей html5 использовано не было. В первую очередь были применены новые элементы, такие как <header>, <footer>, <aside>, <nav>, <time>. Естественно же, их поначалу игнорировали все версии IE, но способы решения этой проблемы известны. Простеньким js были созданы незнакомые ослику элементы — и вот оно, счастье.
Также был применён атрибут placeholder для формы поиска. К сожалению, правильная работа атрибута пока поддерживается только движком webkit, так что для остальных нужную функциональность пришлось реализовывать опять же javascript'ом.
И ещё в одном месте был применён js: для выпадающего меню. И опять же, только для IE, вернее даже только для шестой его версии. У остальных же браузеров псевдокласс :hover проблем не вызвал Улыбаюсь

Задача идентичности отображения в разных браузерах не ставилась. Кое-где даже сознательно применены свойства только для webkit.
Свойствами css3 реализовано большинство градиентов. Браузерам, не поддерживающим css3, предложено вместо градиентов отобразить подходящий цвет кода. Исключение сделано для IE. Он хоть и не понимает общепризнанные стандарты, зато имеет свои, в которых градиенты реализованы куда давнее, чем в головах w3c зародились первые мысли о css3. Правда, реализованы они довольно топорно, но в простейших случаях работают вполне прилично.
Местами, но редко, встречаются тени и закруглённые углы — опять же, в устаревших браузерах они просто не показываются. Читаемость от этого не страдает нисколько. Повод задуматься о необходимости приводить сайты к идентичному виду в различных браузерах. Усилия себя не оправдывают.

В ходе работы над этим сайтом был обнаружен странный баг в ФФ. Если задать list-style: decimal для какого-либо элемента, кроме ol, ul, то нумеруются вхождения исключительно нулями. Странного в этом глюке то, что багрепорт у разработчиков висит аж с 1999 года. Мне было крайне сложно удержаться от комментария в коде на этот счёт.

Отдельной статьёй, конечно, стояла задача организовать вывод чистого и красивого кода из cms 1С-Битрикс. Кто знаком с этой чудо-cms, меня сразу поймёт. Когда ядро сыпет тэгами, да не какими-нибудь, а например <font>, задача становится нетривиальной. Ядро редакторивать нельзя, при первом же обновлении все правки умрут. Сделать ровный код, с правильными отступами, без лишних пустых строк — тоже не самая простая задача в Битриксе. Тут, к сожалению, местами пришлось применять костыли вплоть до регулярных выражений в шаблонах.

Вот. Поругайте теперь вы наше творчество Улыбаюсь
« Последнее редактирование: 19-04-2010 04:21 от Алексей1153++ » Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #1 : 08-04-2010 06:31 » 

Интересно.
Из замеченного
В контактах padding=0, в других разделах он есть.

В шапке при наведении на картинку она смещается - может это так надо?
Для SEO в header отсутствует текстовое название фирмы

Интересно решение 404

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

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

Отвечает то
Отвечает Татауров Владимир Васильевич 
Отвечает Владимир Татауров
Это разные люди?

Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Золотая Лань
Молодой специалист

ru
Offline Offline
Пол: Женский

« Ответ #2 : 08-04-2010 09:14 » 

Sla, спасибо.

В контактах padding=0, в других разделах он есть.
спасибо, это просто надо подправить. Там ещё и схема проезда пока не работает. Думаю, из яндекса её позаимствовать.

В шапке при наведении на картинку она смещается - может это так надо?
ну неспроста же в css
         header h1 a:hover {
            background-position: 1px 1px;
         }
Улыбаюсь

Для SEO в header отсутствует текстовое название фирмы
а как же…
<body>
<header>
   <h1><a href="/">Юридическая фирма Татауров и партнёры</a></h1>
 Быть такого не может

Интересно решение 404
на мой взгляд такое решение наиболее естественное.

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

В вопросах и ответах часто присутствует Здравствуйте. Суть вопроса не раскрывает, текст захламляет. Но это вопрос скорей к тех поддержке
Это реальные вопросы. Опубликованы они в том виде, в каком их люди отправили. А народ-то у нас вежливый, при обращении принято здороваться.

Отвечает то
Отвечает Татауров Владимир Васильевич  
Отвечает Владимир Татауров
Это разные люди?
Это один и тот же человек. Меня тоже немного покоробило. Буду ему указать на такой косячок-с.
А хотя, даже лучше не указать, а запретить писать своё имя вручную, сделать выбор из списка — будет правильно Улыбаюсь

А как насчёт именно техники применения новых спецификаций? Всё ли в тему? Всё ли грамотно?
Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #3 : 08-04-2010 09:38 » 

Код:
<body>
<header>
   <h1><a href="/">Юридическая фирма Татауров и партнёры</a></h1>

а... вот оно где Улыбаюсь
text-indent:-4096px;


В целом очень приятное впечатление. Как от дизайна, так и от контента.
Дизайн прост, цвета приятные.
Но это все касательно юзабилити.
Если претензий у Заказчика нет - то все нормально, а сделано это с применением html5 и css3, я думаю, что роли не играет.

Правда я не понял необходимости кода скрипта MyExtensionEvent(event), ну и ладно.

Оценку поставить? Весьма! Улыбаюсь
Резиновая верстка, к сожалению не могу посмотреть на широком экране.
Интересно посмотреть мобильную версию, если такова существует.

Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Золотая Лань
Молодой специалист

ru
Offline Offline
Пол: Женский

« Ответ #4 : 08-04-2010 10:22 » new

Правда я не понял необходимости кода скрипта MyExtensionEvent(event), ну и ладно.
прошу прощения?
Мне известны на всём сайте четыре скрипта:
— html5forie.js, который создаёт незнакомые ослику элемнеты;
— dropdown.js, который обучает IE6 выпадающему меню;
— placeholder.js, который обучает браузеры, не поддерживающие атрибут placeholder, аналогичному функционалу;
— визуальный редактор на странице консультации. Его туда поместила CMS, но у меня возражений не возникло никаких.
а MyExtensionEvent(event) — это где? Быть такого не может

Интересно посмотреть мобильную версию, если такова существует.
нет, не существует.
Изначально в ТЗ о ней ни слова не было, а это плюс ещё значительный объём работ.
Уже и так сделано гораздо больше, чем предполагал бюджет сайта. Мы же не только за интерес всё-таки работаем.
Хотя, может быть, в будущем на досуге и мобильную версию сделаю. Просто так, ради интереса. Жаль, мобильных устройств нет, чтобы просматривать результаты своего творчества.
Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #5 : 08-04-2010 10:27 » 

Золотая Лань, извини, мне его firebug подсунул.
Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Страниц: [1]   Вверх
  Печать  
 

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines