Рекомендации по кодированию HTML и CSS - PullRequest
Новая
       8

Рекомендации по кодированию HTML и CSS

4 голосов
/ 28 ноября 2008

Мы привлекаем внешнего консультанта для создания XHTML (Transitional) и CSS для большинства основных страниц нового проекта, над которым мы сейчас работаем.

Меня попросили составить список руководств для них, чтобы мы могли быть уверены, что можно ожидать определенного уровня качества. В качестве небольшого технического фона мы будем объединять необработанный HTML, который они предоставляют, в приложение веб-форм ASP.NET (используя обычные главные страницы / внешние таблицы стилей / jquery). Javascript не должен рассматриваться, но форматирование и организация CSS должны быть.

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

Ответы [ 6 ]

5 голосов
/ 28 ноября 2008

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

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

2 голосов
/ 30 августа 2010

Одна вещь, которая делает передачу шаблона HTML / CSS между несколькими внешними разработчиками, это правильное структурирование и отступ для разметки. Точно так же, как книги разбиваются на тома, главы, абзацы, предложения, слова, пробелы и периоды, существует иерархическая структура, облегчающая чтение HTML и CSS (и, с другой стороны, способ кодирования, который делает вещи полный беспорядок)

Как правило: 

     <body>
          <div id="first">
               <p>
                    Some text goes in here...
               <p>

               <ul>
                    <li>A list item</li>
                    <li>A list item</li>
                    <li>A list item</li>
                    <li>
                         <ul>
                             <li>
                                  <a href="#">A link</a>
                             </li>
                         </ul>
                    </li>
               </ul>
          </div> <!-- #first ends -->
     </body>

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

2 голосов
/ 28 ноября 2008

Дайте им список браузеров (версия браузера и ОС), которые, как вы ожидаете, они будут поддерживать.

Должны ли быть соблюдены правила доступа? Вы можете договориться о поддержке некоторых пунктов в Контрольном списке для Руководства по доступности веб-контента . Список на самом деле довольно полезен, поскольку он не только гарантирует, что ваш сайт работает для людей с ограниченными возможностями, но также и для браузеров без JavaScript, CSS, изображений. В списке также содержатся общие рекомендации по созданию разумных веб-сайтов.

Поскольку вы используете ASP.NET, убедитесь, что они включают только один <form> на веб-страницу. Или, по крайней мере, будьте готовы сделать некоторые обходные пути, если вы позволите им использовать больше.

Если вы планируете использовать AJAX, покажите им ASP.NET AJAX Control Toolkit , чтобы они не тратили время на уже построенные вещи.

Я бы настаивал на том, что они используют некоторые проверенные фреймворки, такие как YUI css reset и jQuery .

2 голосов
/ 28 ноября 2008

Один хороший тест, который я всегда делаю для себя, - это открытие страницы и ctrl + scroll. Масштабирование дает вам представление о гибкости и гибкости вашего дизайна.

В IE это может привести к сбою, несмотря ни на что, но там вы также можете попробовать увеличить шрифт и посмотреть, что произойдет (обратите внимание, например, на кнопки, растягивающиеся вертикально)

1 голос
/ 28 ноября 2008

Действительно, убедитесь, что страница проходит проверку.

Также обратите внимание на семантику, страница должна быть в логическом порядке, когда CSS отключен (что имеет место для некоторых браузеров и программ чтения с экрана). Убедитесь, что заголовки на самом деле являются тегами и что все изображения имеют соответствующие теги alt. Также убедитесь, что таблицы используются только для отображения информации и не используются для форматирования. Меню должно быть построено как список, а не как div (семантика).

1 голос
/ 28 ноября 2008

Помимо проверки, следует учитывать следующие моменты - Доступность (Кто является аудиторией) - CSS дизайн (где семантика хорошо спроектирована) - Будьте согласны с вашим соглашением об именах (именования css и id. Это будет полезно в долгосрочной перспективе, когда необходимо внести какие-либо изменения, когда нужно применить новый css и т. Д.).

Ознакомьтесь со следующими рекомендациями из библиотеки разработчиков Yahoo ... http://developer.yahoo.com/performance/rules.html

Также, поскольку вы используете ASP.net, будьте осторожны при именовании пользовательских элементов управления, поскольку генерируемый идентификатор на стороне клиента может быть довольно длинным и неожиданным (asp.net генерирует идентификатор во время выполнения);

Хорошую информацию можно найти на http://woork.blogspot.com/2008/11/useful-guidelines-to-improve-css-coding.html

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...