Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.

Тут можно читать онлайн Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - бесплатно полную версию книги (целиком) без сокращений. Жанр: Прочая старинная литература, издательство Издательский дом Питер, год 2016. Здесь Вы можете читать полную версию (весь текст) онлайн без регистрации и SMS на сайте лучшей интернет библиотеки ЛибКинг или прочесть краткое содержание (суть), предисловие и аннотацию. Так же сможете купить и скачать торрент в электронном формате fb2, найти и слушать аудиокнигу на русском языке или узнать сколько частей в серии и всего страниц в публикации. Читателям доступно смотреть обложку, картинки, описание и отзывы (комментарии) о произведении.
  • Название:
    HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.
  • Автор:
  • Жанр:
  • Издательство:
    Издательский дом Питер
  • Год:
    2016
  • ISBN:
    978-5-496-02271-2
  • Рейтинг:
    5/5. Голосов: 81
  • Избранное:
    Добавить в избранное
  • Отзывы:
  • Ваша оценка:
    • 100
    • 1
    • 2
    • 3
    • 4
    • 5

Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. краткое содержание

HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - описание и краткое содержание, автор Фрэйн ., читайте бесплатно онлайн на сайте электронной библиотеки LibKing.Ru

HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - читать онлайн бесплатно полную версию (весь текст целиком)

HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - читать книгу онлайн бесплатно, автор Фрэйн .
Тёмная тема
Сбросить

Интервал:

Закладка:

Сделать

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

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

Если при рассмотрении вопроса о том, какие функции какими платформами и версиями браузеров поддерживаются, вы еще не ознакомились с сайтом http://caniuse.com, я настоятельно советую вам сделать это. Там предоставляется весьма простой интерфейс для выявления, поддержкой какого браузера пользуются интересующие нас функции.

Краткая справка по инструментарию и текстовым редакторамНеважно какими именно - фото 5

Краткая справка по инструментарию и текстовым редакторам.Неважно, какими именно текстовым редактором или IDE-системой вы пользуетесь для создания своих адаптивных веб-конструкций. Если самые простые текстовые редакторы позволяют вам успешно записывать код HTML, CSS и JavaScript, значит, все в порядке. Аналогично этому нет никакой особой оснастки, играющей важную роль в получении на выходе адаптивного веб-дизайна. Фактически вам нужно лишь что-то позволяющее записывать код HTML, CSS и JavaScript. Чему вы отдадите предпочтение, Sublime Text, Vim, Coda, Visual Studio или Блокноту, не играет практически никакой роли. Работайте в той среде, которая вас больше всего устраивает.

Тем не менее следует знать, что, в отличие от прежних времен, сейчас имеется множество инструментальных средств (зачастую бесплатных), способных существенно облегчить выполнение рутинных, затратных по времени задач создания сайтов. Например, CSS-процессоры (Sass, LESS, Stylus, PostCSS) способны помочь с организацией кода, с переменными, в работе с цветовыми решениями и арифметикой. Такие средства, как PostCSS, способны также автоматизировать решение трудоемких и неприятных задач, например установку в коде CSS префиксов производителей. Кроме того, проверочные средства могут сравнить ваш код HTML, JavaScript и CSS со стандартами, по которым вы работаете, сэкономив массу времени на выявление опечаток и синтаксических ошибок.

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

Первый пример придания адаптивности

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

HTML5 и CSS3 Разработка сайтов для любых браузеров и устройств 2е изд - изображение 6Примеры программного кода

Все примеры кода из этой книги можно загрузить по адресу rwd.education/download.zip или через GitHub на сайте https://github.com/benfrain/rwd. Имейте в виду, что окончательные версии отдельных примеров, приводимых в главе, имеются только в загружаемом коде. Так, если загрузить примеры кода из главы 2, они будут иметь тот вид, в котором приводятся в конце данной главы. В отличие от текста самой главы, в загружаемых примерах кода никаких промежуточных состояний не приводится.

Наш исходный файл HTML

Начнем с простой структуры HTML5. Не обращайте внимания на предназначение абсолютно каждой строки (особенно на содержимое контейнера

, которое более подробно будет рассматриваться в главе 4).

Предлагаю пока сконцентрироваться на элементах внутри тега

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

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

Если есть желание просмотреть весь файл HTML, его можно загрузить с сайта rwd.education:

Scones: the most resplendent of snacks

Occasionally maligned and

misunderstood; the scone is a quintessentially British classic.

Incredible scones, picture from Wikipedia

Recipe and serving suggestions follow.

Ingredients

Method

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

А как она себя поведет на других устройствах? При полном отсутствии CSS на iPhone получится следующее изображение.

Как видите на iPhone она отобразилась точно так же как и обычная - фото 7

Как видите, на iPhone она отобразилась точно так же, как и обычная веб-страница. Дело в том, что изначально iOS отображает веб-страницы шириной 980 пикселов и ужимает их в области просмотра.

Область просмотра браузера в технической терминологии известна как окно просмотра (viewport). Иногда это окно соответствует размеру экрана устройства, особенно в тех случаях, когда у пользователя есть возможность изменить размеры окна браузера. Поэтому впредь при обозначении пространства, доступного для нашей веб-страницы, как правило, будет использоваться эта, более точная терминология.

Эта заранее предполагаемая проблема легко решается путем добавления в

-контейнер следующего фрагмента кода:

Фактически этот метатег с именем viewport не считается стандартным способом указания браузеру способа отображения страницы (хотя и является стандартом де-факто). В данном случае наш метатег viewport представляет собой четкое предписание «отобразить содержимое во всю ширину экрана устройства». Легче, наверное, просто показать вам действие этой строки кода на воспринимающих ее устройствах.

Отлично Теперь тест отобразился и разлился до более естественного размера - фото 8

Отлично! Теперь тест отобразился и разлился до более естественного размера. Пойдем дальше.

Читать дальше
Тёмная тема
Сбросить

Интервал:

Закладка:

Сделать


Фрэйн . читать все книги автора по порядку

Фрэйн . - все книги автора в одном месте читать по порядку полные версии на сайте онлайн библиотеки LibKing.




HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. отзывы


Отзывы читателей о книге HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд., автор: Фрэйн .. Читайте комментарии и мнения людей о произведении.


Понравилась книга? Поделитесь впечатлениями - оставьте Ваш отзыв или расскажите друзьям

Напишите свой комментарий
x