Opera
Компания
57,67
рейтинг
9 сентября 2013 в 17:24

Разработка → Представляем новый браузер Coast

Сегодня мы запускаем новый продукт специально для iPad, который называется Coast. Созданный для просмотра веба на досуге, этот браузер делает интерфейс как можно более незаметным. Каждый сайт в нём — это приложение, которым легко можно пользоваться с помощью жестов в удобном полноэкранном режиме. Ничего лишнего.

Ещё со времён браузера Mosaic браузеры щеголяли кнопками «Назад», менюшками, иконками (большая часть из которых не изменилась за последние 20 лет). Coast легко обходится безо всего этого: чтобы пойти назад — смахните влево, чтобы добавлить сайт в экспресс-панель — перетащите его иконку, для перезагрузки просто потяните вниз. Остались только две кнопки: для главного экрана и недавних сайтов.

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



Для разработчиков


Coast приложенизирует сайты (уж простите за сомнительный неологизм). Поэтому в Coast всё просто работает™, особенно если вы делаете сайты, которые и так хорошо работают на разных устройствах и в разных браузерах, которые готовы к толстым пальцам, слушают тач-жесты (например, с полифилом HandJS, который реализует поддержку W3C Pointer Events и вам больше не нужно думать про мышь и тач-события).

Размер иконок для Coast


Поскольку Coast считает сайты приложениями, иконка становится крайне важна для того, чтобы ваш сайт можно было найти и запомнить. Для группировки страниц под одной иконкой мы смотрим на адрес страницы и указанную для неё иконку. Так что вам стоит указывать одну и ту же иконку для страниц, которые вы хотите сгруппировать в одно «приложение».

Чтобы сделать самые аккуратные иконки, Coast предпочитает картинки 228×228 пикселей — чуть больше, чем нужно для IE и браузеров Apple (144×144). Следующая разметка внутри <head> укажет путь к идеальной иконке для Coast.

<link rel="icon" href="$URL" sizes="228x228″>

Эта разметка никак не помешает той, что вы уже используете для Windows 8, Android или iOS. Если вы не укажете иконку 228×228, то Coast сообразит что-нибудь на основе найденных иконок.

Поддержка веб-стандартов


Coast использует встроенный в iOS компонент UIWebView для отрисовки страниц, он основан на движке WebKit (не Blink, как в других наших браузерах).

Браузер Coast, созданный в Opera Software, доступен в App Store:



P.S. И ещё одно видео:

Автор: @pepelsbey
Opera
рейтинг 57,67
Компания прекратила активность на сайте

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

  • +2
    "… чтобы добавлить сайт в экспресс-панель — перетащите его иконку"
    А чтобы удалить? :)
    • +2
      <sarcasm>Вам места жалко?</sarcasm>
    • 0
      А вы попробуйте :)
  • +1
    Главный вопрос, будет ли под Андроид и далее везде?
    • 0
      Мы начали проект, когда iPad был самым популярным планшетником. Как дойдём до Андроида — расскажем.
      • 0
        Хорошо бы параллельно на несколько платформ подобные проекты разрабатывать )
        • +2
          Вы же не будете делать прототип сразу на нескольких платформах — это бы эксперимент, который очень интересно взлетел.
        • 0
          Это как обычно… Сначала сделают хит на одной платформе. Потом пытаются сделать порт на других платформы. И затем удивляются почему этот хит не «взлетел»?! Хит надо делать или сразу везде, или не делать костыли вообще.

          PS. Бывают, конечно, исключения и их процент не так уж низок, но это только исключения…
        • +1
          Как я понимаю (сам я в десктопе, от мобилок далёк, так что всё нижесказанное — моё личное ИМХО), у iPad и Android весьма разные пользователи, и в то время, как на iPad такой браузер без адресной строки, без панелей инструментов, закладок, синхронизации и смены поисковика смотрится хорошо, для Android он будет слишком аскетичен — там, скорее, будут пользоваться успехом настраиваемые панели инструментов, UserJS, CSS-блокировка загрузки картинок, древовидная навигация по истории, интеграция с git
  • +3
    Адресной строки при просмотре страницы не будет вообще?
    На мой взгляд это пока наилучшая реализация полноэкранного режима браузера на iPad.
    • 0
      Так вроде в хроме она тоже скрывается.
      • 0
        В Dolphin есть полностью полноэкранный режим. Включаешь его и нет никаких панелей вообще. Закрытие вкладок происходит жестами, можно задавать открытие при помощи росчерков и свои собственные жесты.
      • +1
        От того, как это сделано в мобильном Chrome для iPad хочется плакать. Панель с адресом и вкладками туда-сюда болтается, что ужасно раздражает. Они сделали самый неудачный вариант реализации полноэкранного режима, на мой взгляд.
  • 0
    Отлиное видео в конце.

    Весь дизайн сделан в чёрно-белой стилистике, чтобы неотвлекать от цветных иконок сайтов?
    • 0
      Идея была примерно такой, вы правы.
  • +8
    Coast использует встроенный в iOS компонент UIWebView для отрисовки страниц

    Вы так говорите, будто у вас выбор был.
    • +4
      Это не больше, чем констатация факта для тех, кто не в курсе того, как работает iOS.
    • –3
      Выбор есть, можно встроить свой WebKit с более полным доступом ко всем компонентам фреймворка, можно использовать коммерческие модификации HTMLayout и Gecko, можно использовать embedded Presto, Blink и собственное решение в конце-концов.
      • +1
        К сожалению, это не про iOS.
        • 0
          это почему?
          Google Chrome на iOS использует Blink, Opera старая на iOS использовала Presto, я (и уверен, что не только я) в нескольких проектах использовать Gecko, HTMLayout и свой собственный HTML Layout движок.

          Почему не про iOS, где написано, что нельзя использовать свой HTML Layout Engine
          • +1
            Откуда информация про Blink в Google Chrome на iOS? Он использует UIWebView, тот же самый, что и встроенный Safari. Посмотрите хотябы html5test.com. У меня на iPad 3, Safari и Google Chrome показывают одинаковый результат 386 + 9 bonus. Он бы отличался, если бы Google Chrome использовал свой движок. Apple не даёт использовать сторонним браузерам свои движки рендеринга и JS, поэтому под iOS до сих пор нет Firefox а Chrome обрезанный.
          • +2
            Opera Mini на iOS — это не браузер, а программа для просмотра файлов формата MHT.
          • 0
            Google Chrome на iOS использует UIWebView, о чём говорится в официальной справке. Opera Mini использует Presto, который рендерит страницы на сервере, а на устройстве только показывает картинки в формате OBML.

            Насчёт Gecko HTMLayout не в курсе, нюансов может быть много.
        • 0
          более того, можно взять и собрать в приложение эппловскую версию webcore и JavaScriptCore:
      • +1
        На iOS этого нельзя сделать, мы обсуждаем браузер Coast.
  • +1
    Врятли ради вашего браузера будут еще и иконки вставлять (:
    Больше интересует когда будет версия для ифона с возможностью синхронизации. И будет ли синхронизация с десктопной оперой, иначе весь смысл теряется в еще одном браузере, коих тысячи в аппсторе.
    • 0
      Хотелось бы чтобы это стало наконец стандартом, и пропали убогие превьюшки из хрома и других браузеров, банально делающих скрин сайта и уменьшающих до превью.
      • +6
        Уже есть стандарт и мы его использовали: вместо кастомных тегов, вроде

        <link rel="apple-touch-icon-precomposed" href="icon.png">
        <link rel="yandex-tableau-widget" href="icon.json">
        

        мы предлагаем вам описать обычную иконку

        <link rel="icon" href="icon.png" sizes="228x228″>
        
  • +2
    Интересный браузер, пока не вижу для себя причин возвращаться к Safari. Спасибо!
    Правда очень не нравится иконка, на «самопал» похоже.
    Еще вопрос: если я добавляю ссылку в «speed dial», то если я через оный её открываю, потом перехожу оттуда по другой ссылке, то в «speed dial» сохраняется мой последний путь. Как можно закрепить путь, чтобы не менять «speed dial»?
  • 0
    Отличная идея и реализация интерфейса для тачскрин-устройства! Планируете ли вы сделать синхронизацию, поиск на странице, строку адреса для страницы?
  • +1
    Как открыть в фоне несколько страниц и потом их посмотреть?
  • +8
    Закладок нет. Синхронизации нет. Один домен — одна вкладка. Сменить поисковик нельзя. Некоторые элементы интерфейса отображаются с наклоном, и не на ретине это выглядят ужасно. Ну, и баги, куда же без них. Менюшка набекрень
    Непонятно, для кого предназначен браузер. Для пользователей Оперы он слишком не Опера. Для большинства пользователей он слишком аскетичен: Сафари и то мощнее, а ещё он быстрее всех UIWebView-браузеров и есть из коробки. Домохозяйки обоих полов, для которых весь интернет ограничивается Контактом, не станут пробовать что-то новое, пока им из каждого куста не будут кричать: «Попробуй более быстрый* браузер».
    Одним словом, такой же сомнительный продукт, как и Opera-какая-уже-там-по-счёту. У вас там случайно Элоп не завёлся?
    • 0
      А вы не соврали, сразу стало не так скучно в комментариях. Но я всё испорчу: это не просто Opera для iPad, она ещё будет — вроде той, что есть сейчас на Андроиде. Это принципиально новый браузер, «созданный для просмотра веба на досуге», нацеленный на немного другую аудиторию.

      А про баги пишите: почта, личка.
      • +10
        Это принципиально новый браузер

        Где-то я уже это слышал… :)
        • +2
          Ну вот не надо, он даже называется по-другому!
          • +6
            даже?
            • 0
              юмор?
          • 0
            «Он даже называется по-другому!» — эта фраза войдет в историю.
      • 0
        нацеленный на немного другую аудиторию.

        Понятно на кого нацелена стратегия прогрессирующего примитивизма функциональности ПО. Но всё же, тут далеко не все хотят «просто потреблять контент и смотреть картинки в интернете». Вы придумали и сделали удобный интерфейс, зачем так обрезать функциональность, сужая целевую аудиторию?
        • 0
          Coast — это наш взгляд на то, каким может быть браузер будущего. Возможно, этот взгляд слишком смелый, но, судя по отзывам, людям нравится.
          • +1
            Пардон, шаг из окна 13-го этажа тоже был бы немного «слишком смелый».
            Суть не в смелости, а в том, что парадигма его прямо противоположна старой Опере, в которой было всё, несмотря на достаточный минимализм интерфейса (и системных требований), а не «три с половиной вау-фенечки и голый WebKit». Отсюда столько хейтерства в комментариях.
  • 0
    Коэффициент сложности тестирования фронтенда увеличился на единицу.
    • 0
      Там используется UIWebView, а значит по факту это просто мобильный сафари в другой обертке.
      • 0
        В том то и дело, что мобильный сафари — та еще коробка с сюрпризами. Остается надеяться, что браузерные движки идентичны.
        Но на доверии вот, к сожалению, далеко не уйдешь. Еще одного сета тестов это не отменяет.
        • 0
          На Айпаде все браузеры используют один и тот же движок, все, включая этот «Кост» (или как он там читается?).
          • 0
            Я это понимаю :) Но это отменяет надобность в тестировании?
            • +1
              В тестировании на каждой новой оболочкой? Думаю, да. Зачем, если рендерилка одна на всех?
              • 0
                Ну здорово, если это правда. Казалось бы — хром и сафари тоже на одной рендерилке.
                • 0
                  хром для айос и сафари для айос — немного разные вещи. Хотя рендерилка вроде одна (webkit), но UIWebView ограничен в использовании JS по сравнению с сафари
  • +6
    Мы совсем не хотим, чтобы приложения взяли верх над вебом, мы хотим, чтобы веб победил.

    А я хочу, чтобы веб проиграл. Потому что JavaScript — это ужасный выбор в качестве Нового Ассемблера (а вернее C). Потому что разработчики сайтов думают, что интернет есть всюду, а у меня — в центре Санкт-Петербурга — интернета нет (ну не ловит сигнал от соты Yota, и всё тут); я сомневаюсь, что когда-либо в будущем ситуация изменится, ведь пока что даже розетки есть не всюду. Потому что веб — это квинтэссенция парадигмы Service as a Software Substitute. Потому что браузер многим людям заменил операционную систему (даже уточню — браузер с открытой вкладкой Facebook), и это считается нормальным.

    А за новый браузер спасибо.
    • +5
      Вы сейчас прямо в вебе хотите, чтобы веб проиграл. Превосходно!
      • +3
        Да, в идеале я бы предпочёл просматривать Хабр из нативного клиента.
        • +8
          Ага, и чтобы ссылки на внешние ресурсы были ссылками в маркет приложений. :)
          Не надейтесь, веб будет жить.
          • +8
            А где я сказал, что ссылки на внешние ресурсы должны быть ссылками в маркет приложений? Вы бы ещё сказали, что веб лучше тем, что в нём можно масштаб страницы менять. Не надо недостатки Android / iOS приложений переносить на всё-что-не-веб.

            Проблема: приложения могут творить в системе всё, что им вздумается (почти). Правильное решение: sandboxing. Решение веба: никому ничего не разрешать (в последних стандартах начали разрешать, но и соответствующие косяки в виде уязвимостей тоже сразу же появились).

            Проблема: под разные платформы — разный ассемблер. Правильное решение: JVM / .NET. Решение веба: пусть всё будет на JavaScript, а оптимизировать его как-нибудь потом научимся (подсказка: не научимся).

            Проблема: приложения надо устанавливать. Правильное решение: приложения скачиваются автоматически и потом кешируются. Решение веба: да то же самое. Есть и общие библиотеки (какой-нибудь reallyusefulmodule.js для всех хостит Google), и кеширование (в каждом браузере — отдельно). По сравнению с любым пакетным менеджером в Linux это — набор костылей.

            Проблема: в приложениях нет зума. Правильное решение: принудительное разделение кода и описания интерфейса (для которого будет несложно сделать системную функцию масштабирования). Решение веба: HTML — язык разметки, который в общем-то для описания интерфейсов не разрабатывался. Не верите — посмотрите на количество сайтов, которые до сих пор так и не научились изменять размер в зависимости от ширины окна браузера. Большинство нативных приложений это умеют.

            Продолжать?

            История веба — это история того, как люди брали одну и ту же идею и пытались приспособить её для того, для чего она была непригодна с самого начала. Это повлекло за собой cookies, Flash, Java-апплеты, JavaScript и гонку JavaScript-интерпретаторов, язык PHP (ему я отвожу отдельный круг ада), собственный task manager в Chrome, 4 гигабайта на один процесс Opera… Костыли. Весь веб — это костыль, собранный из костылей. Костыль с большой буквы.

            Мне больно смотреть на то, как огромная индустрия работает на поддержание колосса на глиняных ногах, крича при этом «Трепещите! Се грядет исполин, которому предначертано судьбой властвовать над миром!». И самое ужасное то, что у вас и в самом деле может хватить сил привести его к власти.
            • 0
              С веб-страничками — я управляю информацией, а с приложениями (просмотриками той же самой информации) как-то всё наоборот получается. Это личный опыт, если что, а не утверждение.
            • 0
              Видите ли «как надо с вашей точки зрения» != «как есть на самом деле». Причин тому множество. Главная в том, что реальность более устойчива чем ваши умозрительные конструкции. Тот же Микрософт все время пытается сделать в вебе «как надо», но сообщество почему-то не идет у него на поводу. И ваши претензии к html, js и вебу, надуманны. Для большинства проблем существуют нормальные решения.
              А со стороны ваш коммент выглядит: «Ну куда годится эта скорость света 299 792 458 м/с, даже до 300 миллионов не смогли дотянуть криворукие. А эта постоянная Планка, что с ней делать! Да и гравитация должна быть вверх с уклоном вправо, а не к центру.» Брюзжание и старперство, в общем.
              • 0
                Видите ли «как надо с вашей точки зрения» != «как есть на самом деле». Причин тому множество.

                Причина тому одна: те случаи, где «как надо» = «как есть на самом деле», мне как-то в голову не пришло привести.

                И ваши претензии к html, js и вебу, надуманны.

                Только если вы считаете, что «работает — значит, всё отлично», а то, что «под капотом» там ад и ужас, вас не трогает.

                Для большинства проблем существуют нормальные решения.

                Я утверждаю, что это не так. «Существуют» — покажите.
  • +5
    Нет iOS 5 версии? Как владелец старого хлама первого iPad, очень негодую.
    • –4
      Подарите 1-й Айпад маме или бабушке, я так и сделал. Правда у меня пока Айпады кончились :\
      • НЛО прилетело и опубликовало эту надпись здесь
        • +1
          Во даёт!
  • 0
    Хм, интересная идея. Не уверен, что пойдет — но шанс есть, мне кажется. Молодцы.
  • 0
    Капец, чем стала заниматься эта компания?!
    • +8
      Тем же, чем и раньше — браузерами. Нет?
      • 0
        Последним браузером была опера 12.16. А сейчас началось рубилово бабла и завлекание домохозяек.
        • 0
          Так это-то понятно, цель любой компании — зарабатывание денег.
          Жаль только, что при этом страдаем мы — айтишники…
        • 0
          К счастью, в интернет пускают не только крутых ребят, вроде вас.
  • +1
    Идея превратить сайт в приложения это Chrome OS. Опера сделала приложение, которое дублирует в чем тот сам интерфейс айпада (пока иконки и рабочий стол). Проблема тут в UIWebView. Нет JIT, нельзя законно добавить WebGL. Что будет если опера добавит свой Push Notification, аккселерометр, ЖПС? Смысл делать программу на PhoneGap, если внутри Коаста будут все те АПИ? Аппл это приложение забанит, если оно получит хоть зернышко дополнительного функционала. Вот на андроиде почти все можно сделать. Вопрос — разрешит ли гугл опере сделать ИнАпы для сайтов. Может Опера хочет свой Коаст Таб в железе выпустить?
  • +2
    Вёрстка Гугла едет в вашем новом браузере:
    скриншот
    image
    • +4
      Вёрстка Гугла едет в вашем новом браузере:

      Месть — это блюдо, которое подают холодным.

      А по теме — непонятно как обновить страницу, если уже промотал её в середину. Без перемотки вверх обновить, как я понял, невозможно.

      Всегда думал, что дизайнеров, делающих кривые меню, уже всех расстреляли. Как жестоко я ошибался:

      Скриншот
      image
      • +1
        Всегда думал, что дизайнеров, делающих кривые меню, уже всех расстреляли.

        Дизайнеры OS X выстроились у стенки
        image
  • 0
    Внезапно. Не ожидал, честно говоря, от оперы подобного продукта.
    Выглядит весьма приятно, причем и под iOS 6 и под 7, работает пристойно. Респект!

    Единственное замечание — отсутствие вкладок или хотя бы аналога (менеджер око не в счет)
  • +2
    Больше всего меня поразило вытягивание адресов сайтов (по всей видимости из поиска). И то, что помимо «окна» результатов поиска подтягиваются сайты. Почему этого нет в традиционных браузерах? Гениально же! Именно этого мне и не хватает!
  • +2
    Попробовал, в целом сделано отлично. Но раз уж вы пошли по пути отсутствия интерфейса в режиме просмотра страниц — то сделайте пожалуйста поддержку жестов! Что-то вроде: нарисовал пальцем круг — страница обновилась и т.д.
  • 0
    Я так понимаю, это как раз та самая Opera Ice, про которую я писал в январе?
    • 0
      Ну, скажем, не вы писали, а Pocket-lint. И тот «Ice» был ранним прототипом Coast, который показывали на одной из внутренних встреч в компании. Видео с неё, судя по всему, кто-то забыл в баре.
      • 0
        Ну, естественно, что я писал на хабре, а не вообще =) Просто тогда думалось, что это именно первый прототип оперы на вебките, а не что-то самостоятельное, отдельное. Теперь понятно.
  • 0
    «Зарузить Coast by Opera»
    • 0
      Где такое?
      • 0
        В тайтле.
    • +2
      Уже 24-е и все ещё не исправлено ))
  • –1
    В iOS есть прекрасный safari, точка.
  • –1
    Что понравилось:
    — панель снизу на экране просмотра страницы (занимает мало места и удобно нажимать), а остальное место под страницу
    — закладки визуально как приложения
    — мигание ссылки при загрузке страницы
    — обновление страницы через скрол вверх

    Можно легко доработать:
    — инструкция в видео слишком быстрая, смотрел 2 раза. Нужна еще текстовая поэкранная (что на каждом экране делать). И возможность вызвать справку после первого просмотра (наверное, с экрана «приложений»). Понятно, что в идеальной программе справка не нужна, но дизайнеры переоценивают себя или сильно недооценивают контекст обычных пользователей.
    — пиктограмма шаринга как шаринг экрана, обычно что-то другое используют
    — обычно шарю через Скайп. Соответственно, нет в шаринге Скайпа и текстового метода (для других программ, может захочу в блокнот какой-нибудь ссылку и мысли по ней). Сейчас нашел, что по значку «i» можно найти УРЛ и скопировать его. Но при первых тестах у меня этот блок автоматически закрывался как только анимация безопасности заканчивалась. Сейчас стабильно остается, странно.

    Непонятно:
    1) Функция «Назад» (на примере посещения LAM):
    — если возвращаюсь в статью с внешней ссылки, то позиция откуда ушел забывается
    — иногда еще один переход во внешней ссылки приводит к тому, что нельзя через назад вернуться на статью LAM, а иногда можно
    — в функции назад чаще всего страница явно перезагужается, что не очень для мобильного интернета
    2) Вкладки (или что там):
    — при выбрасывании вкладки внезапно какие-то новые добавляются (может так и надо, но механизм непонятен и не ожидаем)
    3) Непонятно что с конфиденциальностью: какие данные в каких случаях и куда посылаются. Видимо, что-то посылается при анализе безопасности, но дальше не понятно.
    • 0
      Зачем минусовать конструктивную критику?
    • 0
      Еще, кстати, было бы приятно иметь историю.

      А так же поддержку прозрачных favicons, сейчас все пытается сделать квадратными и на черном фоне, некоторые пиктограммы так выглядят уныло.
  • +1
    Ннуууу не знаю, по мне так очередной фонарик в аппсторе. Простите.

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

Самое читаемое Разработка