Чем мобильные браузеры отличаются от десктопных
Обновлено: 05.07.2024
Решил составить рейтинг лучших мобильных и настольных браузеров для любителей чистого интернета. Проверка шла на трех самых мусорных с точки зрения рекламы сайтов, Яндекс, чемпионат и бобсоккер + YouTube .
Начнем с Android.
Рейтинг учитывался на самостоятельную блокировку рекламы, без официального приложения Adguard и т.п.
Абсолютный лидер рейтинга – браузер Vivaldi. На данный момент это самый чистый и самый быстрый мобильный браузер для телефонов на Android. Заблокировал даже рекламу Яндекса.
Из плюсов – удобное нижнее меню. Удобнейшее стартовая страница с сохраненными сайтами. Отличное управление настройками. Это единственный браузер у которого вшит фильтр RuAdlist.
Все остальное, тот же Chrome.
Браузер Brave.
Близкий конкурент Vivaldi, который дышит в спину. По сути тот же Chrome. С рекламой справляется на ура, но самую малость хуже.
Из минусов, не совсем удобное нижнее меню.
Mozilla Firefox
Отличный браузер с хорошими дополнениями. Убирает рекламу почти полностью, кроме страниц Яндекса.
Основных минусов несколько – отсутствуют расширенные настройки по файлам cookie. Нет нижнего меню. Нельзя свайпом вниз обновить страницу.
В остальном, ставим браузеру жирную 4+
Adblock Browser
Неплохой браузер, но до лидеров не дотягивает. Пропускает некоторые мелкие детали.
Все остальные Яндекс, Opera, самостоятельно не дотягивают. Очень слабая блокировка, даже YouTube спокойно пробивает рекламу.
Google Chrome – абсолютно худший мобильный браузер для чистого серфинга. У него вообще нет своего собственного блокировщика.
ПК браузеры.
После того, как пришли обновления Google, работа некоторых расширений на ряде компьютерах стала нестабильная. Это ошибка обновления и ей занимаются. Такая проблема возникла на браузерах Chrome, Brave и Edge.
Проверка идет на работу с расширениями Adblock Plus / uBlock Origin + Tampermonkey+ RuAdlist
Браузеры: Vivaldi, Iron, Mozilla Firefox – это три браузера работают как часы, никакое обновление на них не повлияло от слова совсем.
Браузеры Яндекс / Opera – тоже работают как надо, но, единственное, не блокируют на страничках Яндекса. Кому не критично, те могут смело пользоваться их браузером.
Тут все несколько сложнее из-за особенности закрытой системы, однако браузеры постепенно подтягиваются и сюда.
Браузер Brave.
Абсолютно лучший браузер для iPhone и iPad. Блокирует примерно 90% рекламы (но тут надо учитывать слабые возможности iOS). Это шикарный результат.
Mozilla Firefox
Тоже хороший вариант, блокирует немного хуже Brave.
Safari – неплохая блокировка, но для него нужно отдельно скачивать из App Store Adguard.
Была недавняя проблема с YouTube, но ее поправили.
Блокирует примерно 80% всей рекламы.
Всем приятного серфинга в интернете
Советую просто поставить Adguard.)
И будет минимум рекламы во всех браузерах.
Адгуард тема шикарная, но для тех, кто не любит сторонние приложения, вот решил написать нужные браузеры. Многие про них не слышали даже
Вивальди мне по душе из-за системы закладок, папки и кучу подпапок можно создавать, очень удобная сортировка. А так Опера нравится больше всех, на компьютере там сортировка удобная по пространствам. В каждом пространстве свои сайты. Сделали бы так и на Вивальди, стал бы намбер ван для меня
По мне так проще скачать приложение на более менее известный браузер, ну ладно.
Кому интересно, последние новинки в сфере блокировки рекламы.
Подведем итоги уходящего года, по всем новинкам индустрии блокировки рекламы. В последние месяцы…ДНС в последнее время плоховато блочит, процентов 70-80 от силы. Рекламщики научились его иногда пробивать.
У меня этот ДНС практически не работает.
Установите полноценный адгуард с оф сайта, все шикарно блочит. Вот тут все ссылки и настройки
Давно уже хотел написать полную инструкцию, как защитить себя и своих близких от мошенничества в…Какая-то жесткая плохо завуалированная реклама vivaldi. Козырять, что браузер кроет рекламу youtube на мобильных устройствах ну верх такое себе. Кто смотрит YT через браузер тот уже сам себя наказал. Там рулит vanced, а это уже другая история.
Это все очень здорово. Вансед и Адгуард - это две самые шикарные вещи в интернете.
Но пост для тех, кто не хочет их устанавливать. Т.е. чисто браузеры с блокировщиками.
Поэтому Вивальди из них всех самый топовый. До этого был Браве, но пока чуть отстал.
спасибо, будем знать
У Яндекса зубы заскрипели.
Почему нет нормального AdBlock на моб устройства?
Есть, адгуард, но только с оф.сайта.
Обзор на браузер Brave. Все о рекламе, заработке, реферальной программе и режиме TOR.Спонсор этого…DuckDuckGo Browser - не блочит рекламу.
Браве хорошая штука. Не пользовался всеми ее примочками, оцениваю чисто по блокировке
"Из плюсов – удобное нижнее меню." - не подскажете, что это за нижнее меню в Vivaldi&
CNews Analytics составили рейтинг крупнейших поставщиков облаков и проанализировали спрос в России. Согласно исследованию, в прошлом году рынок SaaS был почти в вдвое больше рынка IaaS, но последний растет быстрее.
Привет, Хабр. Мы подготовили для вас сравнительный обзор 10 браузеров под Android, оцениваемых по функциональности, производительности, дизайну. Уместно отметить, что мобильных браузеров гораздо больше десяти. Их слишком много, чтобы сделать полноценный Топ 2014 года в масштабах одной публикации. Вместо того, чтобы полагаться только на популярность (или скорость работы), в шорт-лист вошли приложения, который представляет весь спектр реализуемых в мобильных браузерах технологий, включая новичков, ещё не собравших большую аудиторию пользователей (по материалам статьи The best Android browsers, 2014 edition: design, features, and performance)
Интерфейс и дизайн
В популярных тестах мобильных браузеров для Android акцент сделан на скорость. В этом был смысл, когда большинство смартфонов не могли похвастаться высокой производительностью. Теперь всё по-другому, и даже самые дешевые устройства обеспечивают достаточную скорость работы, чтобы сосредоточиться в другом направлении – на дизайне интерфейса и юзабилити.
В этой сфере создатели браузеров отличаются повышенной «ленивостью». Мы видим, что мобильные браузеры крайне редко меняются внешне и, по большей части, являются миниверсиями наших настольных браузеров. У всех адресная строка расположена сверху, вкладки располагаются точь-в-точь как на десктопной версии, область отображения страниц идентична у всех приложений. Это странно, но из всех протестированных браузеров (даже тех, которые не попали в шорт-лист этой статьи), только у Habit Browser адресная строка сбежала с привычного месторасположения и оказалась в нижней части дисплея. Мы не считаем, что такая реализация совершенна, но на среднем Android смартфоне дисплей сейчас в опасной близости к 5-дюймовым размерам, и добраться до верхней адресной строки становится всё сложнее.
Chrome
Chrome от Google знаком большинству пользователей, ведь на многих телефонах приложение установлено по умолчанию. Интерфейс Chrome приятный в использовании, но он совершенно ничем не выделяется. Типичный подход Google, зарекомендовавший себя с положительной стороны, ведь нет никаких проблем со скоростью работы и взаимодействием с интерфейсом. Прокрутка страниц, масштабирование, всё работает быстро и плавно, независимо от того, насколько «тяжёлые» страницы вы просматриваете (конечно, если у вас современный смартфон).
Firefox
Отрицать богатый опыт компании Mozilla невозможно. Firefox – один из самых популярных браузеров для ПК и один из самых лучших браузеров для Android. Работает он довольно быстро, поддерживает синхронизацию вкладок и закладок в мобильной версии с настольной версией браузера. Как и его ПК-версия обладает упрощенным интерфейсом, хотя и не таким изящно-лёгким, как у Chrome.
Opera
Opera является третьим и последним Android-браузером в этом списке, который может похвастаться родственными связями со «взрослой» настольной версией. Как и конкуренты выше по списку, Opera предлагает упрощенный, хоть и немного устаревший, дизайн. К счастью, следование «старой школе» означает лишь удобную работу с навигацией и отличные показатели по скорости, даже когда речь идет о работе с очень «тяжёлыми» сайтами.
Dolphin
Это уже совершенно другая лига. Перед нами один из самых старых мобильных браузеров, доступных для Android, и из года в год он остаётся хорошей альтернативой популярному трио. Dolphin может похвастаться продуманным дизайном. Он остаётся одним из немногих браузеров, играющим с цветовым оформлением интерфейса (зелёный – цвет жизни). Он более многофункциональный, чем большинство конкурентов, но к счастью поддержка разных жестов, интеграция с социальными сетями, наличие синхронизации не только между разными устройствами, но и между разными браузерами, не сказываются в худшую сторону на скорости его работы.
UC Browser
Как и Dolphin, UC Browser имеет более спокойный интерфейс. UI браузера хорошо проработана, элементы интерфейса расположены эргономично, что облегчает навигацию. По скорости работы к браузеру также нет нареканий.
CM Browser
CM Browser новичок на Android, но ему уже есть чем похвастаться. У приложения самый минималистичный интерфейс, но реализован он со вкусом. CM Browser можно начать пользоваться мгновенно, не тратя время на изучение «функционала».
Javelin
Этот браузер показался нам наиболее визуально-привлекательным. Он просто сделан красиво и воспринимается чуть лучше, чем просто инструмент для работы. В нём нет никаких излишеств, интерфейс прост, навигация осуществляется легче лёгкого.
Puffin
Многие могут удивиться, почему Puffin вообще появился в этом списке, особенно учитывая его малопривлекательный дизайн. Действительно, Puffin можно считать худшим браузером в нашем обзоре, в нём есть серьёзные недостатки. Например, работа с пользовательским интерфейсом сопровождается длительными зависаниями даже на топовых устройствах. То же самое касается работы с веб-страницами. Прокрутка, масштабирование, работа с панорамным видом – всё это оставляет желать лучшего. Так что же забыл в статье «Лучшие Android браузеры» этот «отщепенец»? Об этом мы расскажем чуть позже.
Next Browser
Красочный и в тоже время минималистичный интерфейс. Можно заметить задержку во время просмотра изображения на некоторых страницах, не всё гладко и с прокруткой, масштабированием.
Lightning Browser
Chrome от Google. Интерфейс без излишеств, дополнительный функционал спрятан туда, где вы не сразу сможете его найти. Что касается навигации, интерфейс достаточно прост, работает с небольшими фризами.
Особенности
После того как вы познакомились с внешним видом представленных браузеров, вам, естественно, хочется узнать больше о поддерживаемом функционале. Некоторые из браузеров (Firefox, UC Browser, Dolphin) поддерживают расширения, но описать их все разом просто невозможно. Кроме того, средний пользователь никогда не будет пользоваться чем-то, что не работает сразу по принципу «установился и действует как мне нужно».
Так что же нам действительно нужно от браузера? Синхронизация. К сожалению, не все браузеры в нашем списке поддерживают эту функцию. Анонимность. Режим инкогнито стал своего рода стандартом, но и его предлагают не все браузеры. Наконец, сжатие данных всё ещё остаётся достаточно интересной функцией. Мы собрали все популярные функции и проверили, как наши браузеры справятся с ними.
* Adblocker Dolphin требуется JetPack (на Android 4.3-4.4). Flash поддерживается только через аддон.
* Puffin поддерживает flash всего 7 дней. После этого – угадайте что.
* Firefox поддерживает Flash только при установленном плагине.
Как вы можете заметить, UC Browser и Dolphin оказались наиболее многофункциональными. С другой стороны, Dolphin имеет ряд других, довольно уникальных особенностей (например, поддержка жестов).
Производительность
Даже самый визуально-привлекательных браузер не проживёт долго на вашем смартфоне, если он не обладает хорошей скоростью работы.
Конечно, синтетические тесты и реальный мир, это не одно и то же. Тесты не всегда рисуют репрезентативную картину реальной производительности. С другой стороны, некоторые тесты не только измеряют скорость работы в «попугаях», но и пытаются имитировать сценарии реальных действий пользователей.
Синтетические тесты
1. SunSpider
Разработанный Apple ещё в 2007 году, SunSpider остаётся частью стандартного набора тестов для браузеров. SunSpider анализирует способность браузера обрабатывать код JavaScript.
А вот и единственная причина по которой Puffin попал в список лучших браузеров. Puffin отлично справляется за счёт использования облачных вычислений. Что касается остальных, мы рады отметить успехи новичков, обогнавших даже Chrome от Google.
2. Mozilla Kraken
Как и SunSpider, Mozilla Kraken пытается измерить эффективность работы браузеров с JavaScript. Однако этот тест, если можно так выразиться, более хардкорный.
Неудивительно, что Puffin снова у руля, а вот Firefox неожиданно «слился», хоть браузер создан с Kraken в одной компании. Dolphin второй раз уверенно занимает последнее место.
3. Browsermark
Этот бенчмарк анализирует общую производительность браузеров (и стремится к тому, чтобы показать её реальной).
Снова Puffin оказывается впереди конкурентов, Chrome восстанавливает утраченные позиции, а Dolphin продолжает разочаровывать.
(*чем больше, тем лучше)
4. Peacekeeper
Peacekeeper (созданный финнами из компании Futuremark) также пытается измерить реальную производительность браузеров.
Да, ваши глаза не врут, Puffin снова показывает удивительный результат. Firefox неожиданно отстаёт.
(*чем больше, тем лучше)
Peacekeeper может также проверить браузеры на предмет их совместимости со стандартом HTML5. Учитывая, что отрасль считает HTML5 следующим логичным шагом развития, важно понять, способен ли ваш браузер обработать новый код.
Firefox показывает один из самых достойных результатов (наряду с UC Browser). Остальные браузеры нельзя назвать полностью HTML5-совместимыми.
(*чем больше, тем лучше)
Время загрузки страницы
Мы будем смотреть на скорость загрузки в двух различных состояниях – с новой страницей и ранее открытой. Важное правило: браузеры должны загрузить все содержимое страницы.
1. «Горячая загрузка» (загрузка страниц, которые вы уже посещали)
Синтетические тесты не лгут – Puffin действительно король, когда дело доходит до времени загрузки (горячей) страниц. Chrome, который всё равно открывает страницу быстро, всё же отстаёт.
К сожалению, Firefox и Dolphin (Opera тоже) отстают сильно от лидеров.
2. «Горячая загрузка» (мобильная версия сайта)
3. «Холодная загрузка»
Насколько хорошо ваш браузер обрабатывает страницы, которые вы посещаете впервые?
Ого, Puffin впервые потерял звание «самого быстрого». Однако это был единичный случай и на других страницах этот странный браузер вернул себе пальму первенства.
Что касается остальных, мы видим довольно схожие результаты, хотя Firefox и Javelin работают хуже. Dolphin, наконец, удалось всплыть со дна, и занять место середнячка. CM Browser показал очень достойный результат, а Chrome заслуженно всех победил.
4. «Холодная загрузка» (мобильная версия сайта)
Расход памяти
В последнем испытании мы проверили, как наши браузеры справляются с использованием памяти. В большинстве современных смартфонах есть как минимум 1 Гб оперативной памяти, однако всё ещё много людей пользуются и другими телефонами, в которых, к примеру, 512 мегабайт. Для этих устройств «съедание» памяти – это последнее, что им нужно.
(*в мегабайтах; чем меньше, тем лучше)
Как вы можете видеть, за исключением Firefox, Puffin, Chrome, и Opera, остальные показали схожий результат с Lightning Browser, оказавшемся самым «лёгким» из всех. Другими словами, если вашему устройству нахватает памяти, то Lightning Browser будет неплохим выбором — это простой, многофункциональный и быстрый браузер.
* Примечание: имейте в виду, что потребление памяти варьируется в зависимости от устройства.
Заключение
Мы использовали смартфон OnePlus One для тестирования всех браузеров.
Если исключить такие аномалии, как Puffin, мы увидим примерно средние результаты для всех браузеров. Да, можно сказать, что Dolphin, Opera, и Firefox, как правило, медленнее, чем остальные, а Chrome и CM Browser проявили себя как одни из самых быстрых. CM Browser порадовал простотой и скоростью работы. С другой стороны, Dolphin, несмотря на его проблемы в скорости работы, предлагает весьма интересный функционал.
Самое большое разочарование в этом тесте – Puffin. Разработчики явно сосредоточились не на том, а могли сделать один из лучших мобильных браузеров в мире.
В целом, мы можем заявить, что самые популярные – не означает самые лучшие. Если вы не желаете тратить время на выбор Android-браузера, ни один браузер в нашем списке вас не разочарует (мы серьезно, возможно вам даже Puffin понравится).
Мы уже писали о методах (Mobile First и Response Web Design), которые используем при разработке нашего сервиса. В этой статье я хочу поделиться с вами нашим опытом. То, что в теории кажется простым, на практике порой оборачивается кошмаром. Речь пойдет о том, как нам удается создавать универсальный веб-сервис, способный работать на большом количестве устройств.
Классы поддержки браузеров
На рынке тысячи устройств, несколько платформ и мобильных браузеров. Давайте посмотрим на глобальную статистику распространенности мобильных браузеров. На графике представлены данные StatCounter за прошедший год. Нас интересовали лидеры — Opera, Mobile Safari, Android и Nokia (у всех, кроме Оперы, браузер работает на движке WebKit).
Мы позаимствовали у Yahoo идею классовой поддержки браузеров, которая определяет следующие три класса:
- Браузеры класса «С» не получают JavaScript и CSS. Осуществляя поддержку этого класса, мы гарантируем получение контента любым пользователем. В этот класс мы отнесли Internet Explorer 7-ой версии и ниже.
- В класс «А» попадают самые распространенные браузеры, поддерживающие многие стандарты. В этих браузерах осуществляется обязательное тестирование. Мы отнесли в этот класс Internet Explorer 8 и 9 и последние стабильные версии Chrome, Safari, Firefox, Opera, Opera Mobile, а также Opera Mini 4 и 6.
- В класс «Х» попадают браузеры, отсутствующие в обоих классах. Это, как правило, старые версии браузеров из класса «A» и их последние нестабильные версии. Определяя браузер в этот класс, мы предполагаем, что в нем будут отсутствовать какие-либо серьезные ошибки. В этих браузерах мы не проводим тестирование.
Таким образом, осуществляя поддержку класса «C», мы гарантируем, что контент будет получен пользователем, и он будет способен с ним работать. Это означает, что без поддержки отображения картинок, JavaScript и CSS, пользователь будет способен ориентироваться в контенте. Это базис для класса «A» и всего приложения.
Адаптивный дизайн
Несколько слов о том, какие основные требования предъявлялись к веб-дизайну. Во-первых, это «пиксель-перфект» при просмотре мобильной версии сайта на десктопе (то есть необходимо было придерживаться попиксельного соответствия верстки и макета). Во-вторых, поддержка touch-устройств. И, в-третьих, минимальное поддерживаемое разрешение экрана равнялось 240 пикселям по ширине.
Почему же 240? Дело в том, что это ширина экрана телефона Nokia на платформе S60 третьего поколения, выпущенного в 2006 году, и (внимание!) с WebKit-браузером на борту, то есть с частичной поддержкой CSS3 и JavaScript 1.5. Очень сложно найти на рынке мобильный телефон с меньшим разрешением экрана, который бы использовался для интернет-серфинга.
Резиновая верстка, на которой строится адаптивный веб-дизайн, не подходит для «пиксель-перфект», помимо прочего нам было необходимо ограничить пространство ленты с контентом. Поэтому, указав минимально и максимально допустимые значения ширины, мы получили тянущийся до определенных крайних значений блок с контентом.
Для маленьких экранов мы уменьшаем значения отступов у основных блоков с помощью media queries. И вообще, когда начинаем разрабатывать какой-то блок, то определяем, как он будет отображаться на устройствах с низким разрешением экрана, какие элементы блока будут отключаться или заменятся и на что с помощью media queries.
Важно помнить, что, хоть телефон 7-летней давности с Opera Mini 4 и поддерживает media queries, но их не поддерживает Internet Explorer 8. Поэтому в своем проекте мы использует media queries для деградации, то есть в сторону уменьшения размера экрана устройств.
В ленте мы используем «плавающие» изображения, которые подстраивают свою ширину под ширину родительского элемента, сохраняя при этом оригинальные пропорции. Указав max-width равным 100%, вы запрещаете картинкам быть больше, чем оригинальный размер в случае, когда контейнер оказывается шире картинки.
На изображении ниже вы можете видеть, что картинка сжалась до размера ленты, а с помощью media queries были уменьшены отступы внутри ленты и скрытыми оказались фон, дополнительные слои с тенями и элементы шапки страницы.
Особенности работы мобильных браузеров
Современные мобильные браузеры отлично показывают страницы, не созданные для таких низких разрешений, какими обладают мобильные устройства. Как вы, должно быть, знаете, им это удается за счет использования логического, а не физического разрешения. Например, iPhone по умолчанию рендерит страницу в окне шириной 980 пикселей и показывает уменьшенный вариант, позволяя пользователю масштабировать отдельные участки страницы. При разработке мобильного сервиса такое поведение крайне нежелательно, поэтому необходимо браузеру указать размер логического окна равным физическому размеру экрана устройства (за это отвечает значение device-width в примере ниже).
Параметры minimum-scale и maximum-scale определяют допустимые значения масштабирования страницы. Если их задать равными единице, то вы запретите пользователю менять масштаб страницы. Для этих целей существует еще один параметр — user-scalable . Если у вас в дизайне имеются элементы со свойстовом position равным fixed, то обязательно укажите этот параметр равным 0, чтобы активировать поддержку position: fixed в Андроиде (установкой в одинаковое значение параметров minimum-scale и maximum-scale такого не добиться).
В мобильных браузерах (в особенности в touch-устройствах) может отсутствовать поддержка псевдо-классов :hover , :focus и :active . Поэтому, если в дизайне есть функционал, который необходимо показывать только по наведению мышки на родительский элемент, следует по умолчанию оставлять такие элементы видимыми. А после загрузки страницы, определив тип устройства, скрывать их с помощью каскадов в CSS. Например, следующим образом:
Хочется отметить, что определение возможностей браузера становится как никогда предпочтительней определения наименования и версии браузера. Ведь мы делаем сервис, способный работать на каком угодно устройстве.
JavaScript и AJAX — это круто. Но нужно понимать, что не всем, чем удобно пользоваться на большом экране, будет удобно пользоваться на экране шириной 240 пикселей. Многие динамические вещи мы отключаем для маленьких экранов, как например, возможность написать ответ в ленте без перехода на отдельную страницу (в телефоне это оказывается не таким приятным действием, потому как интерфейс «тормозит» и дергается).
Мы придерживаемся концепции Progressive Enhancement, которая заключается в использовании простой семантической верстки для представления всего контента и функционала, а последние нововведения в CSS и JavaScript должны быть лишь приятным улучшением пользовательского взаимодействия. Это позволяет гарантировать работу проекта на любом устройстве, поддерживающем HTML. Таким образом, нет ничего сложного в том, чтобы отключать какие-то тяжелые вещи для устройств с низким разрешением экрана (как правило, они обладают меньшим объемом оперативной памяти и низкой производительностью). Вот обычный пример обработчика события клика по кнопке, которая отправляет некоторую форму.
Я хочу заметить, что мы не отключаем весь JavaScript – только функции, которые удобней было бы совершать на отдельных страницах, специально созданных для таких случаев.
Практика
Теперь давайте попробуем создать вот такую интересную кнопку.
У кнопки градиентные границы и фон, есть иконка и текст, а может быть только иконка или текст. Эта кнопка играет роль собирательного образа, на примере которого я попытаюсь охватить как можно больше проблем.
Градиенты сделаем с помощью CSS, для этого поместим в кнопку еще один элемент button__inner . Сделаем возможным, чтобы обычные ссылки выглядели как наша кнопка. Здесь и далее будет приводиться код CSS, в котором опущены многие свойства, типа цветов и градиентов, и будет использоваться синтаксис Sass (SCSS). Sass это метаязык на основе CSS, в котором есть поддержка переменных, выражений, примесей и много другого.
По требованиям, у кнопки должны быть границы шириной $border-width пикселей, а высота должна равняться $height пикселей. Поэтому для класса button мы сделаем педдинг равным $border-width , а высоту равной требуемой высоте $height за вычетом педдингов. Для вертикального выравнивания элементов внутри button__inner, таких как иконки и текст, воспользуемся указанием line-height , равным всему свободному пространству.
На нашем проекте мы не используем элемент IMG для создания иконок. И вот почему. Сделаем сначала кнопку, в которой для отображения иконки будет использоваться элемент IMG . В качестве источника картинки укажем путь до файла с прозрачной картинкой, а через CSS свойства background-image и background-position укажем иконку в спрайте. Это, пожалуй, самый известный способ создания спрайтовых иконок.
От этого варианта нам пришлось отказаться по двум причинам:
- Альтернативный текст может вовсе не отображаться браузером (так делает WebKit).
- Нет возможности обеспечить функционирование такого элемента в браузерах с отключенным CSS.
| IE6 | Chrome |
|---|---|
 |  |
| <A> | <BUTTON> |
|---|---|
|  |
| <A> | <BUTTON> |
|---|---|
| |
| <A> | <BUTTON> |
|---|---|
 |  |
| <A> | <BUTTON> |
|---|---|
- В десктоп режиме страницы отображаются практически так же, как и в большой Опере, за тем исключением, что браузер все-таки постарается уместить блоки с текстом по ширине экрана, чтобы исключить появление горизонтального скролла.
- Второй режим — мобильный, переключиться в который можно из настроек браузера. Находясь в нем, Opera форматирует страницу в такой вид, чтобы она уместилась в одну колонку, т.е. стала удобной для просмотра на устройстве с небольшим экраном без появления горизонтального скролла.
Еще несколько слов о media queries и мобильном режиме Opera Mini. Давайте теперь заставим кнопочку с иконкой и текстом скрывать текст на экране с разрешением меньшим или равным 320 пикселям по ширине:
Вроде бы все просто и в iPhone даже работает. Но не в Opera Mini в мобильном режиме:
Не забывайте, что в таком режиме Opera Mini определяет себя как handheld устройство. И в медиа запросах нужно либо явно указывать тип handheld, либо использовать волшебный идентификатор all.
Теперь несколько слов о мобильном Safari. Давайте сделаем кнопку из ссылки и делегируем обработчик событий click на ней элементу body .
Это пример кода с использованием jQuery, он работает, обработчик вызывается. Но стоит сделать кнопку на другом элементе, отличном от ссылки или элемента формы, например на DIV , как код перестает работать — обработчик не вызывается.
Дело в том, что событие click , выполненное не на ссылке или кнопке формы, не поднимется до body , и наш обработчик не будет вызван. Но если указать свойство cursor: pointer для класса button , то, о чудо, все начинает работать.
Заключение
Хочу отметить теперь, что современные мобильные браузеры практически не уступают своим большим братьям. Та же Opera Mini поддерживает media queries, частично CSS3 и JavaScript (хоть и с ограничениями). Однако у мобильных браузеров есть еще пара больших отличий:
- Поддержка position: fixed . Несмотря на то, что где-то поддержка и появилась (iOS 5, Android 3, Opera Mobile), реализация хромает, и пользоваться зачастую невозможно. Блоки с position: fixed могут застывать при скроллинге, исчезать и не появляться до следующего touch-события. Если браузер не поддерживает position: fixed , то элемент ведет себя так, как если бы ему было установлено свойство position: absolute .
- Поддержка свойства overflow: scroll . Пример отсутствия поддержки — Opera Mini, где скролл может быть один — на документ. Если браузер не поддерживает overflow: scroll , то элемент ведет себя так, как если бы ему было установлено свойство overflow: hidden . Поддержка этого свойства реализована в iOS 5, Android 3.2.
- Об ограничениях и особенностях работы Opera Mini (в том числе и JavaScript) вы можете прочитать на сайте Opera для разработчиков.
Я постарался рассказать о том, как мы создаем наш сервис, которым удобно пользоваться на ноутбуке, смартфоне и планшете, игровой консоли, телевизоре с выходом в интернет, и даже на холодильнике.
Сегодня поговорим об отличиях десктопных и веб-приложений. Не обещаем, что сможем быть полностью непредвзятыми, но постараемся честно рассмотреть плюсы и минусы.
Итак, веб-приложение работает через браузер, используя его как среду выполнения, десктопное— устанавливается, запускается и работает локально. Сравним их по основным характеристикам.
Веб-приложение не требует установки, все обновления происходят на сервере, доставляются пользователям сразу — достаточно просто перезагрузить страницу или выйти, а потом снова зайти в аккаунт. Но иногда для его работы нужно установить дополнительные библиотеки или использовать защищенные сетевые протоколы.
Десктопное нужно устанавливать на компьютере или мобильном устройстве, обновлять каждый раз, как выходит новая версия. Несмотря на то, что чаще всего процесс автоматизирован — все равно это занимает время пользователей и ресурсы устройств. Дополнительно придется отслеживать версии на каждом компьютере, смартфоне и планшете.
Веб-приложение публикуется на локальном или облачном сервере, там же происходит процесс обновления. При этом сервер нужен в любом случае, даже если решение совсем простое. Ведь кроме фронтенда, с которым пользователи будут работать через браузер, нужно где-то размещать бэкенд.
Десктопное придется устанавливать вручную на каждом устройстве. В компании, где много рабочих мест, это может занять достаточно много времени. Плюс в том, что не обязательно выбирать сервер или искать ресурсы для публикации, если речь не идет о клиент-серверном решении.
Работа веб-приложения зависит не только от того, насколько грамотно оно разработано и характеристик пользовательского устройства, но также от скорости интернет-соединения, работоспособности удаленного сервера.
Десктопное работает автономно, поэтому главное — качество кода и стабильность оборудования, на котором этот код выполняется. Но если связь с сервером необходима — то возникают те же проблемы, что у «конкурента».
Веб-приложение доступно из любой точки мира, с любого устройства, а пользовательские файлы всегда будут под рукой. Но только если есть интернет-соединение или реализована возможность работы офлайн и загрузки-выгрузки данных.
Десктопное доступно всегда — но только с устройства, на котором оно установлено. Чтобы работать с разных устройств, его придется установить на каждом, а также придумать, где хранить файлы, чтобы всегда иметь к ним доступ.
Веб-приложение одинаково хорошо будет работать на любом устройстве, будь то стационарный компьютер, ноутбук, планшет или смартфон — ведь оно практически не зависит от «железа» или операционной системы. Главное — подходящий браузер. Как правило, для работы большинства веб-клиентов подходят Google Chrome, Mozilla Firefox, Safari от Apple или Windows-браузер (Microsoft Edge / Internet Explorer).
Десктопное зависит от операционной системы, процессора, видеокарты, ряда других параметров. Приходится учитывать нюансы каждой среды (в том числе при «отлове» ошибок), писать код с учетом возможных вариантов, нанимать отдельных разработчиков или даже целые команды для версий под разные ОС.
Веб-приложение полностью зависит от браузера и технологий его работы. Поэтому есть ряд ограничений, например — в доступе к аппаратному обеспечению вашего устройства. Это и некоторые другие ограничения обойти невозможно (во всяком случае, сейчас). Но целый ряд задач можно решить по принципу «что нельзя переписать, можно надстраивать или расширять». Редакторы документов, изображений, аудио, видео, 3D графики; системы управления проектами; хранилища файлов; no-code конструкторы — успешно работают в браузерах. Инструменты быстрой интеграции сервисов, а также интерфейсные библиотеки еще больше расширяют существующие возможности.
Десктопное позволяет реализовать буквально любые функции — в этом оно однозначно превосходит web. Во всяком случае, полноценного онлайн аналога Photoshop или Sony Vegas еще никто не разработал. Системные утилиты — определенно сфера десктопной разработки. Как и программы, которые должны долго работать в фоновом режиме — например, чаты или торрент-клиенты — через браузер с ними просто неудобно будет работать. Также такое ПО чаще используется для специфических проектов, с нестандартными интерфейсами или функциями. Поэтому web разработка пока не представляет опасности для desktop программистов— эти технологии будут развиваться параллельно, просто под разные задачи.
По поводу скорости работы все не так однозначно, как может показаться. Несмотря на то, что браузерный клиент постоянно обменивается данными с сервером, быстродействие будет во многом будет зависеть от того, насколько грамотно он спроектирован, «чистоты» кода, возможностей оборудования, стабильности канала связи. Разница в быстродействии, которая очевидна при тестировании, зачастую незаметна для пользователей.
Веб-приложение, разработанное с использованием современных протоколов и средств защиты, способно полноценно обеспечивать сохранность данных. Однако на некоторые моменты разработчики не могут повлиять: браузер, облачный сервер, канал связи — могут повысить уровень безопасности за счет дополнительных средств проверки, но также снизить его за счет своих уязвимостей. Несомненный плюс для пользователей: такое ПО проще контролировать. Ограничения среды снижают вероятность, что оно скрыто получит доступ к файлам или запустит какой-либо процесс.
Десктопное настраивается более гибко, а значит — теоретически при его разработке можно предусмотреть все потенциальные уязвимости. На практике — вряд ли. Впрочем, сделать его полностью безопасным все же можно. Но только если устройство, на котором оно установлено, не будет никуда подключаться, даже к защищенной локальной сети. В противном случае — риск все равно будет.
Однозначно сказать, что безопаснее — сложно (если вообще возможно). На это влияют много факторов, прежде всего — человеческий. А ведь именно в защите от человеческого фактора, в различных его проявлениях, заключается смысл всех мер безопасности.
Но очевидно, что доверие к десктопному ПО выше. Некоторые организации принципиально не соглашаются работать в браузерах, многие пользователи все еще относятся к ним настороженно. Однако ситуация меняется — с развитием технологий растет лояльность людей к ним.
Возможности браузерной разработки огромны, ее потенциал раскрыт далеко не полностью. Технологии развиваются, рынок ИТ растет, предлагая все новые приложения — при прочих равных пользователи будут выбирать web просто потому, что это удобнее. Если говорить о решениях для корпоративных клиентов, то тут браузерные приложения незаменимы. Они гибкие, универсальные, не требуют предварительной подготовки среды, позволяют сэкономить финансы компании, аппаратные ресурсы, время сотрудников.
Но рассмотрим другое мнение. Некоторые разработчики считают, что перспективы далеко не безоблачные. Слишком несовершенны технологии работы браузеров, слишком много некачественного ПО уже «накодили». Поэтому пользователи браузерных решений будут возвращаться обратно к десктопным. Такая тенденция будет продолжаться, пока разработчики браузеров массово используют Java Script. Только когда появится реальная альтернатива — можно будет делать прогнозы на будущее.
Веб-приложения уже сейчас подходят для решения многих задач — как бизнеса, так и обычных пользователей. Если вы решили разработать свое — используйте no-code платформу AppMaster.io.
Готовые блоки кода и визуальные инструменты для работы с ними помогут вам создать готовое веб-приложение и его серверную часть гораздо проще и быстрее, чем методы классического программирования!
Читайте также: