Какие технические детали должен рассмотреть программист веб-приложения перед публикацией сайта?

Что необходимо сделать программисту, реализующему технические детали веб-приложения, перед публикацией сайта? Если Джефф Этвуд может забыть о HttpOnly cookie , sitemaps , и поддельные подделки запросов на одном и том же сайте , какую важную вещь я могу забыть?

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

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

Кроме того, я ищу что-то более конкретное, чем просто неопределенный ответ «веб-стандарты». Я имею в виду, HTML, JavaScript и CSS по HTTP в значительной степени заданы, особенно когда я уже указал, что вы профессиональный веб-разработчик. Итак, выходя за рамки этого, Какие стандарты? В каких обстоятельствах и почему? Укажите ссылку на спецификацию стандарта.

2188 голосов | спросил 13 revs, 6 users 30%
Joel Coehoorn
1 Jam1000000amThu, 01 Jan 1970 03:00:00 +030070 1970, 03:00:00

1 ответ


2594

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

Интерфейс и пользовательский интерфейс

  • Имейте в виду, что браузеры внедряют стандарты непоследовательно и убедитесь, что ваш сайт работает достаточно хорошо во всех основных браузерах. При минимальном тестировании с недавним движком Gecko ( Firefox ), движок WebKit ( Safari и некоторые мобильные браузеры), Chrome , поддерживаемый браузеры IE (воспользуйтесь Совместимость приложений VPC Images ) и браузеры отображают ваш сайт в разных операционных системах.
  • Подумайте, как люди могут использовать сайт, отличный от основных браузеров: например, мобильные телефоны, устройства для чтения с экрана и поисковые системы. - Некоторая информация о доступности: WAI и Section508 , Мобильная разработка: MobiForge .
  • Staging: развертывание обновлений без ущерба для ваших пользователей. Попросите одну или несколько тестовых или промежуточных сред для реализации изменений архитектуры, кода или широкого содержимого и убедитесь, что они могут быть развернуты контролируемым образом, не нарушая ничего. Автоматизируйте способ развертывания одобренных изменений на сайте. Это наиболее эффективно реализуется в сочетании с использованием системы управления версиями (git, Subversion и т. Д.) И механизма автоматической сборки (Ant, NAnt и т. Д.).
  • Не показывать недружественные ошибки непосредственно пользователю.
  • Не помещайте адреса электронной почты пользователей в обычный текст, поскольку они будут освобождены от спама.
  • Добавьте атрибут rel="nofollow" к пользовательским ссылкам , чтобы избежать спам .
  • Постройте продуманные лимиты на своем сайте - Это также относится к категории безопасности.
  • Узнайте, как сделать прогрессивное улучшение .
  • Перенаправление после POST , если этот POST был успешным, чтобы предотвратить повторное отправку обновления .
  • Не забывайте учитывать доступность. Это всегда хорошая идея, и в определенных обстоятельствах это юридическое требование . WAI-ARIA и WCAG 2 являются хорошими ресурсами в этой области.
  • Не заставляйте меня думать

Безопасность

Производительность

  • При необходимости выполните кэширование, правильно поймите и используйте HTTP-кеширование , а также HTML5 Manifest .
  • Оптимизация изображений - не используйте 20 КБ изображения для повторяющегося фона.
  • Узнайте, как gzip /deflate content ( лучше сфотографировать ).
  • Объединить /объединить несколько таблиц стилей или несколько файлов сценариев, чтобы сократить количество подключений к браузере и повысить способность gzip к сжатию дубликатов между файлами.
  • Взгляните на сайт Yahoo Exceptional Performance , множество замечательных рекомендаций, и YSlow (требуется Firefox, Safari, Chrome или Opera). Кроме того, скорость страницы Google (используйте с расширение браузера ) - еще один инструмент для профилирования производительности, а также оптимизирует ваши изображения.
  • Используйте CSS-спрайты CSS для небольших связанных изображений, таких как панели инструментов (см. «свернуть HTTP-запросы "point)
  • Используйте спрайты SVG image для небольших связанных такие как панели инструментов. Раскраска SVG немного сложна. Вы можете прочитать об этом здесь .
  • Занятые веб-сайты должны учитывать разделение компонентов по доменам . В частности ...
  • Статический контент (то есть изображения, CSS,JavaScript и, как правило, контент, который не нуждается в доступе к файлам cookie) должен идти в отдельном домене , который не использует файлы cookie , поскольку все куки для домена и его поддоменов отправляются с каждым запросом в домен и его поддомены. Один из хороших вариантов заключается в использовании сети доставки контента (CDN), но рассмотрите случай, когда этот CDN может завершиться неудачей, включив альтернативные CDN или локальные копии, которые могут быть поданы вместо этого.
  • Свести к минимуму общее количество HTTP-запросов, необходимых браузеру для отображения страницы.
  • Используйте компилятор Google Closure для JavaScript и другие инструменты для минимизации .
  • Выберите механизм шаблонов и сделайте /предварительно скомпилируйте его с помощью задач-бегунов, таких как gulp или хрюкать
  • Убедитесь, что в корневом каталоге сайта есть файл favicon.ico, т. е. /favicon.ico. Браузеры автоматически запросят его , даже если значок не указан в HTML на все. Если у вас нет /favicon.ico, это приведет к большому количеству 404s, что приведет к снижению пропускной способности вашего сервера.

SEO (поисковая оптимизация)

  • Используйте URL-адреса, ориентированные на поисковые системы, то есть используйте example.com/pages/45-article-title вместо example.com/index.php?page=45
  • При использовании # для динамического содержимого измените # на #!, а затем на сервере $_REQUEST["_escaped_fragment_"] - это то, что использует googlebot вместо #!. Другими словами, ./#!page=1 становится ./?_escaped_fragments_=page=1. Кроме того, для пользователей, которые могут использовать FF.b4 или Chromium, history.pushState({"foo":"bar"}, "About", "./?page=1"); Is великая команда. Поэтому, хотя адресная строка изменилась, страница не перезагружается. Это позволяет использовать ? вместо #!, чтобы сохранить динамический контент, а также сообщить серверу, когда вы отправляете по электронной почте ссылку, которая находится после этой страницы, и AJAX не делает необходимо сделать еще один дополнительный запрос.
  • Не используйте ссылки, которые говорят «нажмите здесь» . Вы теряете возможность SEO, и это усложняет работу с читателями экрана.
  • XML-карта сайта , желательно по умолчанию /sitemap.xml .
  • Используйте <link rel="canonical" ... /> , когда у вас есть несколько URL-адресов, указывающих на один и тот же контент, эту проблему также можно решить из Инструменты Google для веб-мастеров .
  • Используйте Инструменты Google для веб-мастеров и Bing Инструменты для веб-мастеров .
  • Установите Google Analytics прямо в начале (или инструмент для анализа с открытым исходным кодом, например Piwik ).
  • Узнайте, как robots.txt и работают поисковые роботы.
  • Запросы перенаправления (с использованием 301 Moved Permanently) с запросом www.example.com на example.com (или наоборот) чтобы предотвратить разделение рейтинга google между обоими сайтами.
  • Знайте, что там могут быть сильные пауки.
  • Если у вас есть нетекстовое содержимое, посмотрите в расширения карты сайта Google для видео и т. д. В Ответ Тима Фарли .

Технологии

  • Понимайте HTTP и такие вещи, как GET, POST, сеансы, файлы cookie и что это означает быть «без гражданства».
  • Напишите XHTML / HTML и CSS в соответствии с спецификациями W3C и убедитесь, что они проверить . Цель здесь состоит в том, чтобы избежать режимов браузера и в качестве бонусапроще работать с нетрадиционными браузерами, такими как устройства чтения с экрана и мобильные устройства.
  • Понять, как JavaScript обрабатывается в браузере.
  • Понимать, как загружаются JavaScript, таблицы стилей и другие ресурсы, используемые вашей страницей, и рассматривают их влияние на производительность воспринимаемой . В настоящее время он широко считается подходящим для переместить сценарии на низу ваших страниц с исключениями, обычно такими вещами, как приложения для аналитики или прокладки HTML5.
  • Понимайте, как работает песочница JavaScript, особенно если вы собираетесь использовать iframes.
  • Имейте в виду, что JavaScript может и будет отключен, и поэтому AJAX является расширением, а не базовым. Даже если большинство обычных пользователей оставляют это сейчас, помните, что NoScript становится все более популярным, мобильные устройства могут работать не так, как ожидалось, и Google не будет запускать большую часть вашего JavaScript при индексировании сайта.
  • Узнайте разницу между 301 и 302 перенаправляет (это также проблема с SEO).
  • Узнайте как можно больше о вашей платформе развертывания.
  • Рассмотрите возможность использования Сбросить таблицу стилей или normalize.css .
  • Рассмотрим рамки JavaScript (такие как jQuery , MooTools , Прототип , Dojo или YUI 3 ), который будет скрыть много различий браузера при использовании JavaScript для манипуляций с DOM.
  • Взяв воспринимаемую производительность и рамки JS вместе, рассмотрите возможность использования службы, например API библиотек Google загрузить фреймворки, чтобы браузер мог использовать копию фреймворка, который он уже кэшировал, а не загружать дублируемую копию с вашего сайта.
  • Не изобретайте велосипед. Перед выполнением НИЧЕГО выполните поиск компонента или примера о том, как это сделать. 99% вероятность того, что кто-то это сделал, и выпустил версию кода OSS.
  • В противоположность этому, не начинайте с 20 библиотек, прежде чем вы даже решите, каковы ваши потребности. В частности, на клиентском веб-сайте, где почти всегда в конечном итоге важнее держать вещи в весе, быстроте и гибкости.

Исправление ошибок

  • Поймите, что вы потратите 20% вашего времени на кодирование и 80% его поддержки, поэтому код соответственно.
  • Настройте хорошее решение для отчетов об ошибках.
  • У вас есть система для общения с вами людьми с предложениями и критикой.
  • Документируйте, как приложение работает для будущих сотрудников службы поддержки и людей, выполняющих техническое обслуживание.
  • Сделайте частые резервные копии! (И убедитесь, что эти резервные копии являются функциональными) Имейте стратегию восстановления, а не только стратегию резервного копирования.
  • Используйте систему управления версиями для хранения ваших файлов, например Subversion , Mercurial или Git .
  • Не забудьте сделать свое Приемочное тестирование. Ракурсы, такие как Selenium , могут помочь. Особенно, если вы полностью автоматизируете свое тестирование, возможно, используя инструмент непрерывной интеграции, например Дженкинс .
  • Убедитесь, что у вас есть достаточный вход в систему с использованием фреймворков, таких как log4j , log4net или log4r . Если что-то пойдет не так на вашем живом сайте, вам понадобится способ узнать, что.
  • При ведении журнала убедитесь, что вы зафиксировали как обработанные исключения, так и необработанные исключения. Отчитывайте /анализируйте выход журнала, так как он покажет вам, где ключевые проблемы находятся на вашем сайте.

Другое

  • Внедряйте мониторинг и аналитику на стороне сервера и на стороне клиента (нужно быть активным, а не реактивным).
  • Используйте службы, такие как UserVoice и Intercom (или любые другие подобные инструменты), чтобы постоянно поддерживать связь с вашими пользователями.
  • Следуйте Vincent Driessen модель ветвления Git

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

ответил math0ne 25 Jpm1000000pmThu, 25 Jan 2018 21:35:55 +030018 2018, 21:35:55

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132