Презентация на тему "Кроссбраузерность сайта"

Содержание

• 
  Слайд 1

  Кроссбраузерность сайта

  Рейтинг браузеров и советы по достижению кроссбраузерности Подготовила студентка группы 9321 Татьяна Болдашевич

• 
  Слайд 2

  Рейтинг браузеров

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

• 
  Слайд 3
  

  GoogleChrome — браузер, разрабатываемый компанией Google на основе браузера с открытым исходным кодом Chromium. Самый молодой из всех участников рейтинга. Первый стабильный релиз вышел в декабре 2008 года.

• 
  Слайд 4
  

  MozillaFirefox — свободный браузер от компании MozillaCorporation. Firefox— много платформенный интернет-обозреватель поддерживающий огромное количество расширений. Дата первого выпуска — ноябрь 2004 года.

• 
  Слайд 5
  

  InternetExplorer (IE) — браузер от компании Microsoft. Долгое время был самым популярным браузером в мире. Особой популярности достиг в 2002-2003 годах с Windows XP (около 95%). Поставляется с 1995 года в комплекте с Windows.

• 
  Слайд 6
  

  Opera — веб-браузер, выпускаемый компанией OperaSoftware. Вышел на рынок в 1995 году.

• 
  Слайд 7
  

  Safari — браузер, разработанный компанией Apple, и входящий в состав операционных систем Mac OS и iOS. Появился после прекращения выпуска InternetExplorer для Mac. Первая тестовая версия для Windows была выпущена в июне 2007 года.

• 
  Слайд 8

  Рейтинг браузеров в России на сентябрь 2012 года

• 
  Слайд 9

  Динамика популярности браузеров в России в 2009-2012 гг.

• 
  Слайд 10

  Динамика популярности браузеров в мире

  2009 год

• 
  Слайд 11
  

  2012 год

• 
  Слайд 12

  Популярность мобильных версий браузеров в России на 2012 год

• 
  Слайд 13

  Оценка браузеров по 10-бальной шкале

• 
  Слайд 14

  Понятие кроссбраузерности

  Кроссбраузерность сайта (от cross-browser – англ.) подразумевает под собой одинаковое (или с незначительными искажениями) отображение и функционирование сайта в различных Интернет-браузерах. Ее достижение на сегодняшний день является непростой задачей, а потому считается одним из признаков профессионального создания сайтов и веб-дизайна.

• 
  Слайд 15
  

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

• 
  Слайд 16

  Понятие «баг»

  Баг – ошибка при работе программы или отображении сайта. По легенде, 9 сентября 1945 года учёные Гарвардского университета, тестировавшие вычислительную машину Mark II AikenRelayCalculator, нашли мотылька, застрявшего между контактами электромеханического реле и один из тестировщиков произнес этот термин. Извлечённое насекомое было вклеено в технический дневник с сопроводительной надписью: «Firstactualcaseofbugbeingfound».

• 
  Слайд 17

  Понятие «фаззинг»

  Фаззинг – поиск багов. Каждый год в Канаде на конференции CanSecWest проходит конкурс PWN2OWN по поиску багов с современных ОС и браузерах.

• 
  Слайд 18

  Создание кроссбраузерного сайта

  1. Используйте 2. Решите проблемы совместимости. Для этой задачи удобно использовать инспекторов совместимости – специальные программы, анализирующие код.

• 
  Слайд 19
  

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

• 
  Слайд 20
  

  5. Предусмотрите режим без плагинов Это касается Flash, Silverlight и любых других расширений.

• 
  Слайд 21
  

  6. Проектируйте под разные экраны

• 
  Слайд 22
  

  7. Проектируйте под пальцы, мышь и клавиатуру

• 
  Слайд 23

  Популярные баги IE

  Двойной внешний отступ элемента (IE DoubleMarginFloatBug) – у блочного элемента с прописанными правилами margin и float в IE наблюдается интересный баг: значение отступа margin увеличивается в 2 раза. Решение: Пропишите для элемента значение display:inline.

• 
  Слайд 24
  

  Непонимание CSS позиционирования

• 
  Слайд 25
  

  Центрирование текста html, body { text-align: center; }

• 
  Слайд 26
  

  Проблемы с отображением прозрачности .element { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; // фильтр для IE8 filter: alpha(opacity=50); // фильтр для IE6-7 opacity: .5 // для остальных браузеров }

• 
  Слайд 27

  Заключение

  Кроссбраузерность была и пока остается одной из наиболее острых проблем в веб-разработке. Следование веб стандартам, в том числе html и css, дает достаточно высокий уровень совместимости.