28 сентября 2011 в 02:39

SlideShare отказался от Flash в пользу HTML5

HTML*
Самый популярный в интернете сервис для хостинга слайдов SlideShare вчера объявил о самом значительном изменении в своей истории. Презентации и документы в форматах PowerPoint, PDF, Keynote или OpenOffice теперь рендерятся и отображаются в HTML5 вместо Flash.



Разработчики говорят, что пять лет назад и представить было невозможно создание сервиса вроде Youtube или SlideShare без использования Flash, но теперь веб наконец-то созрел для этого.

Причин для апгрейда три. Во-первых, презентации на HTML5 отображаются на всех устройствах, включая смартфоны/планшеты iPhone/iPad и Android, и на десктопе — и это один и тот же файл. Таким образом, уменьшается объём данных на хостинге и можно сэкономить на CDN. Во-вторых, документы стали на 40% компактнее и загружаются на 30% быстрее. В-третьих, документы теперь индексируются поисковыми системами. Текст без проблем выделяется мышкой и копируется, что всегда было затруднительно с Flash.

Работа над апгрейдом Flash → HTML5 продолжалась шесть месяцев. Труднее всего пришлось с обработкой шрифтов. Нужно было сделать поддержку для рендеринга разнообразных шрифтов, которые не установлены на клиентской машине. Но эта проблема была решена, так что если вы изобретёте свой собственный шрифт и загрузите на сайт PDF с ним, он будет идеально отображаться в SlideShare.

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

Чтобы контролировать одинаковый рендеринг PDF и HTML, была создана отдельная система контроля ошибок, которая сравнивает картинки, полученные с помощью двух методов рендеринга, и вычисляет степень различия. Если показатель выше определённого порога, то вместо HTML5 слайды выдаются картинками PNG. Разработчики считают, что лучше пожертвовать единым HTML5-подходом, чем внешним видом документа.

Вся инфраструктура SlideShare работает на Amazon EC2. Теперь сотням виртуальных серверов нужно хорошо поработать, чтобы переконвертировать из Flash в HTML5 несколько миллионов документов, что накопились на хостинге SlideShare за пять лет его существования. Разработчики надеются, что процесс завершится до конца текущего года. После этого момента весь контент будет выдаваться в HTML5.

Бонус
Подборка лучших презентаций со SlideShare, посвящённых HTML5, теперь — на HTML5 :)
Анатолий Ализар @alizar
карма
751,5
рейтинг 18,2
Пользователь
Похожие публикации

Комментарии (85)

  • +53
    Вот так, потихонько-помаленьку, сервис за сервисом и будет вытеснятся flash. Это радует.
    • +8
      Головная боль для Flash-разработчиков
      • +7
        Да что им мешает на HTML5 то перейти? В общем-то AS похож на JS, не думаю, что это сложно!
        • +1
          По мне так JS лучше AS, ну да это вопрос холиварный.
        • +2
          Видео. Его в HTML5 по факту нет и не предвидится.
          Всё, что позволяет сделать сегодня — показать кролика в хроме.
          • +1
            Ну, даже если это так — это не повод делать «всё на флеше». Если у флеша есть возможность умного управления подгрузкой видео и т.п. — сделайте отображение видео на флеше, но остальные элементы управления на html5+js. Типа как grooveshark или prostopleer, флешем проигрывают музыку (хотя возможно кто-то уже и html5 audio дает), а остальное на html5.
          • +1
            > Видео. Его в HTML5 по факту нет и не предвидится.
            А мужики из YouTube и Vimeo в курсе?
            • +1
              Как раз в курсе и именно поэтому ютуб на html только там, где без этого нельзя.
              • 0
                Про youtube.com/html5 вы не в курсе? Что будет, если открыть Vimeo без Флеша вы не знаете?
                > Видео. Его в HTML5 по факту нет и не предвидится.
                Тупой троллинг.
        • 0
          КО_mode: среда разработки /КО_mode
        • +5
          Вы шутите, да?
          Если я собираюсь написать RIA, то я буду использовать только флеш.
          Меня бросает в холодный пот при мысли о том, что приложение придется верстать на HTML/CSS с миллиардом костылей для всех браузеров, не говоря уже о том, что там даже элементарные вещи делаются с трудом, и впридачу писать движок на убогом яваскрипте (яваскрипт можно сравнивать разве что с as1, но никак не с текущей третьей версией).
          То что на флеше сделаешь за неделю и оно будет работать прекрасно и везде одинаково, на HTML придется два месяца страдать и оно еще нигде не заработает.
          • +1
            Если я собираюсь написать RIA, то я буду использовать только флеш.

            ExtJs, Cocoa, это как минимум
            • +1
              Прошу прощения: не Cocoa, а Cappuccino
            • +1
              После пары серьезных проектов на extjs я понял что то вместо насилия над языком которое сделали эти ребята чтобы можно было нормально писать крупные проекты, лучше бы я писал это все на as3 и меньше тратил нервных клеток.
              Да и по возможностям всему этому добру очень далеко до флекса.

              ЗЫ по теме, то приветствую изменения это хороший пример где html5 уместнее чем flash
          • 0
            То что на флеше сделаешь за неделю и оно будет работать прекрасно и везде одинаково

            Более ста миллионов устройств с iOS передают вам пламенный привет ;) Да и я бы не сказал, что все, что сделано на Flash прекрасно работает даже на десктопных компьютерах, уж больно каждое творение на Flash считает себя единственной задачей, на которую компьютер должен тратить ресурсы.
            • +1
              Ну что ж, а пользователь айПада2 зашедший по ссылке из сабжа на СлайдШэр и не увидевший там ни-че-го передает пламенный привет Джобсу и его маркетинговому жульничеству.

              Не работает Html5 на iOS устройствах, друзья. Вас обманули.

              В то время как Flash давно и прекрасно работает на большинстве Андроид устройств.
              • –4
                Вы бы хотя менее очевидно толстили, а то читать аж противно.
              • +1
                Вы меня прямо заинтриговали, взял айпад2, пооткрывал презенташки — увидел все, что должен был увидеть. Сходил на ютуб, сходил на вимео — проблем не обнаружил. Может у вас какой-то неправильный айпад?
                • 0
                  Я перепроверю.

                  А Вимео и юТюб насколько я знаю не через html5 видео показывают для iУстройств. Просто выдают видео-файл, таким же образом как это делалось и ранее в в iOS 1-2 задолго до популяризации html5.
                  • 0
                    Просто выдают видео-файл

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

                    Тут еще стоит отметить, что на том же ютубе не все видео разрешены для html5. Но опять же это не значит то, что html 5 на iOS устройствах не работает.
                  • +1
                    Вконтакт еще часть своего видео умеет в html5 отдавать, тоже проигрывается.
    • НЛО прилетело и опубликовало эту надпись здесь
      • +6
        Всего-лишь 2 года прошло, а приложений на html5 уже пруд-пруди.
        • +4
          Я джва года ждал этого!
    • +2
      Такие сервисы и должны подавать пример.
      Это будет торопить браузеры активно развивать поддержку html5, w3c перевезти документ в статус рекомендации, а нас использовать.
    • 0
      Еще бы IE вытеснить, или хотя бы обновить всем до нормальной версии, которая вряд ли выйдет.
    • 0
      в регионы тенденции дольше идут
    • +1
      вот как за столь безобидный комментария можно нахватать столько минусов в карму? не понимаю. это проделки воинствующих flash'еров?
  • –4
    Флеш потихоньку уведает
    «The Web is Back»
  • 0
    Adobe нервно курит а сторонке.
    • +16
      adobe уже приготовил adobe edge для создания html5 анимаций
    • 0
      В Adobe тоже не наивные дети сидят, и стараются идти в ногу со временем. Как результат — о котором упомянуто выше — появление нового продукта Adobe Edge. Flash же продолжает обрастать новыми возможностями, хотя html5 уже начал ему наступать на пятки. Но это хорошо и для Flash в том числе, ибо будет стимулировать и его развитие, и дай Бог, ликвидацию недостатков.
  • +3
    Такая тема вот ток не нравится:
    image
    • –4
      Opera?
      • +2
        Если бы: Firefox 6.0.2 / Linux
        • 0
          А, думал давняя проблема оперы с дробными координатами, оказалость, что у вас не подгрузился шрифт. F5 не помогает?
          • +2
            или в настроках снята галочка «Allow pages to choose their own fonts...»
            • +1
              Да, точно. Спасибо. Но мне шрифт этот как то не очень нравится)
              Да и мне кажется, что неправильно, что из-за шрифта — все плывет. Они отдельно для каждой буквы чтоли координаты задают?
              • +1
                Похоже, что зависит от исходника. Если в исходнике проставлен нестандартный кернинг, то текст разбивается на дивы там где это необходимо.
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Да это просто первая мысль при видео координат типа «left:45.5746%», раньше с этим было много проблем. Не принимайте близко к сердцу. Давно оперу не видел.
          • НЛО прилетело и опубликовало эту надпись здесь
    • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Надо просто немного подождать, пока шрифт подгрузится. По крайнер мере в Chrome/Linux так.
  • +1
    iPad и slideshare теперь смешиваются?
  • 0
    Круто, но со сглаживанием шрифтов беда.
    • +4
      Это уже на совести вашего браузера и OS.
  • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      Примитивной? HTML5 5 лет назад, вы серьезно?
      • +5
        Та ладно вам, тут от html5 только название, имхо. Обычный html+css. Наверняка, даже в шестом ie работает.
      • НЛО прилетело и опубликовало эту надпись здесь
  • +2
    В данном случае, разумная знамена. Но в целом, не понимаю я всей этой истерии…
    • +1
      *замена
    • –1
      Флеша нет и не будет на iPhone, iPad, Windows Phone 7, you name it, доля которых в общем количестве посетителей сайтов стремительно растет.
      Так что сугубо прагматизм.
      • +1
        Да даже на андроиде лучше бы его не было — у меня двухъядерный телефон поддерживающий флэш, так ролики с ютуба внедрённые в страницы он показывает на флэше! А это значит жуткие тормоза телефона и браузера, и мелкие контролы, по которым затруднительно попасть пальцем, практически невозможно перемотать видео и т.п. В iOS это сделано на порядок удобнее и просто честнее. А на андроиде флэш пока только для галочки и дополнительного аргумента в холиварах, пользоваться им пока невозможно.
  • +4
    Шрифты, шрифты… Самая большая головная боль — нормальный рендеринг шрифтов в вебе.
    И, похоже, Slideshare таки не решил эту проблему на 100%.
  • –1
    Реализация понравилась. Действительно, пора бы всем переходить на html5.
  • +2
    Flash Player 9 (or above) is needed to view presentations.
    We have detected that you do not have it on your computer. To install it, go here.
  • +2
    Viva la revolucion!
  • 0
    Эх, теперь присылаю ссылку на slideshare нужно будет рассказывать, каким браузером его открывать, какие запросы браузера подтверждать, что нужно не забыть нажать f11 для нормального фулскрина… Ну зато на айпадике можно будет посмотреть… Почему бы не определять автоматом и, если есть флеш, показывать через него?
    • 0
      Почему бы не определять автоматом и, если есть флеш, показывать через него?


      Отвечаю на ваш вопрос цитатой из топика:

      Причин для апгрейда три. Во-первых, презентации на HTML5 отображаются на всех устройствах, включая смартфоны/планшеты iPhone/iPad и Android, и на десктопе — и это один и тот же файл. Таким образом, уменьшается объём данных на хостинге и можно сэкономить на CDN. Во-вторых, документы стали на 40% компактнее и загружаются на 30% быстрее.
      • 0
        Еще раз — если есть флеш, показывать через него (это к вопросу о первом пункте). Что толку с того, что это один и тот-же файл, если его смотрят онлайн? Все равно на каждый девайс он отдельно закачивается. А на серверах место под презентации экономить странно.

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

        Блин, один спорный аргумент и убирают возможность смотреть через флеш… ребята небось фанатики html5.
        • –4
          У флеша есть всего одно «серьезное» НО — это отдельный встраиваемый модуль. Фактически, он неподконтролен системе безопасности браузера.
          Правда некоторые браузеры включают плеер в свой код, как хром, например. Но пишут-то его не сами!
          Вот если бы Adobe создала плеер именно как библиотеку рендеринга OpenSource, которая бы подключалась к браузеру на этапе сборки/компиляции и «отдала» для включения в порты — была бы совсем другая история.
          • +3
            Это НО для параноиков, реально, флеш используется на 99% персоналок и ломают его явно не чаще браузера.
            А выложи адоб исходники, у каждого браузера был бы свой флеш и пришлось бы переживать по поводу того, что там кодек не поддерживается, там ускорение кривое, там еще какие-то косяки. Единство флеша это как раз очень важное преимущество. Не нужно тут никаких open source.
            • –2
              Пусть будет единый, но уровень «песочницы» VM2 недостаточный, хорошо бы иметь возможность заставить ее работать в песочнице браузера. Но для этого нужен исходный код самой виртуальной машины, которая исполняет байт-код.
              Поэтому «все любят html5» — он исполняется в песочнице браузера, а значит — не дырявее его.
              • 0
                На практике, это проявляется в виде существенного процента взломов именно через флеш?
                • +1
                  Если это не IE6 то да, скорее всего взлом будет через продукты Adobe.
                  • 0
                    Это как-то подтверждается статистикой, которую можно посмотреть?
                    • 0
                      Я помогу: www.metasploit.com/modules/
                      • 0
                        3 эксплоита для флеша (не свежие версии). Аналогично ФФ, например. Я чего-то не замечаю?
                        • 0
                          Да, весьма частого обнаружения критических уязвимостей в продуктах Adobe. Настолько частых, что Google пришлось встроить свой pdf ридер в Chrome.
                          • 0
                            Мы конкретно про флеш говорим, при чем тут pdf?
                            • 0
                              andoriyu сказал: Если это не IE6 то да, скорее всего взлом будет через продукты Adobe.
                              • 0
                                А, тогда извините, упустил из виду. Тогда нет смысла спорить, а то не по теме выходит. Разговор конкретно про flash.
      • –1
        Не работает на айПаде2 с самой свежей iOS. Сам проверял.

        Как по мне, при текущем развитии html5 и веб-стандартов массовый переход с Флэш приложений на их хтмл-пятые клоны — это некомпетентная пиар акция от которой будут проблемы и головная боль как у пользователей так и у создателей приложений.
        • +1
          Я не знаю, как приложение из топика, но те приложения на Канвас, что мы сейчас делаем — отлично работают даже в iPad 1
  • 0
    Я всегда пользовался мобильной версией SlideShare — она никогда на флеше не работала — просто слайды подгружались картинками. Не совсем понятно, зачем они вообще начали использовать флэш.
    • +1
      Потому, что слайды векторные. На большой экране картинка будет смотреться грустно, или очень много весить.
  • 0
    винда + хром 14 = нет сглаживания шрифтов
    • 0
      same here (win7+chr14)
      ничего, скоро прикрутят, я уверен
    • 0
      chrome 16, linux — полёт нормальный.
  • 0
    у меня все шрифты как будто грубым напильником обработали. с пьяну.
  • –1
    Mac+Opera 11.51 не работает вообще.
  • +2
    Во-вторых, документы стали на 40% компактнее и загружаются на 30% быстрее.
    У меня когнитивный диссонанс:

    • 0
      Потому что это делает система автоматически без участия человека. В случае нестандартного кернинга используется отдельное
      позиционирование для каждого дива.

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