Архивы Категорий: Веб-разработка

Главная / Веб-разработка
41 Пост

Давайте вкратце поговорим об истории HTML.

Обычно история какой-то технологии не является особо захватывающей, и я бы не сказал, что история HTML это исключение.

Но некоторые её части дадут вам не только понимание того как эта технология развивалась, но также позволят вам оценить аспекты HTML, которые по-прежнему релевантны и применимы сегодня.

История HTML

До 1997 не было стандартов сообщества, так что в основном браузеры делали что хотели. Они изобретали новые теги, реализовывали некоторые вещи по-разному. Это был в каком-то роде Дикий Запад для Сети.

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

Около 1997 года появился консорциум W3C, предложив стандарты, на которые действительно начали обращать внимание разработчики браузеров. Это был стандарт HTML4, который быстро обновили до HTML 4.01.

Этот стандарт все еще был довольно слабым и у браузеров все еще оставалось довольно много свободы в реализации того как отображаются страницы.

Затем, около 2000 года, W3C сделали еще одну спецификацию под названием XHTML 1.0, она была основана на XML.

XML очень жесткий, но очень четкий язык разметки.

W3C хотели продолжить работу и издать XHTML 2.0.

Проблема была в том, что производители браузеров, которые на тот момент уже имели историю частичного игнорирования стандартов, решили что W3C движется слишком медленно и вообще в неправильном направлении.

Так что, в 2004 разработчики браузеров объединились и создали другую группу под названием WHATWG.

Эта группа значительно менее демократична по сравнению с W3C. Они имеют один центр и одного редактора, принимающего финальные решения.

Некоторое время эти организации не особо пересекались.

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

Это то что произошло в 2007-2009 годах.

Так что, WHATWG и W3C начали в какой-то мере сотрудничать.

Тогда они представили то что мы имеем сейчас, HTML5.

Что это означает для вас

Что имеет значение, так это то, что есть две организации, которые в какой-то степени отвечают за HTML.

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

W3C отвечает за стандарты, это то чем они занимаются. А WHATWG даже не дают версии своим HTML-стандартам, они просто называют это HTML который постоянно развивается.

«Нет версии, мы не останавливаемся, мы продолжаем развивать его».

И эти ребята действительно делают браузеры.

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

Так как следить за всем этим?

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

Спецификация HTML5

Я переводил некоторые спецификации на русский.

Кроме того, еще одним интересным сайтом является caniuse.com.

Это сайт, который сам отслеживает стандарты HTML5, SVG, CSS, JavaScript API и так далее, чтобы сказать вам какие браузеры их поддерживают.

К примеру, если вы введете srcset, то получите таблицу с информацией о том какие браузеры поддерживают этот относительно новый атрибут, а какие (как IE) — нет.

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

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

На данный момент первый по популярности браузер это Chrome, за ним идет Firefox.

К примеру, вы очень хотите что-то реализовать, что поддерживается ими, но не поддерживается, скажем, IE. В этом случае вы можете принять решение пожертвовать небольшой долей.

Итак, поговорим о том что такое HTML.

Что такое термин «HTML» и как он относится к вебу? Немного ниже мы поговорим о большой тройке технологий, на которых держится Сеть: HTML, CSS и JavaScript.

Где в этом место для HTML? Другими словами, какую роль играет HTML в веб-разработке?

По мере прочтения вы найдете ответы на эти довольно простые вопросы.

HTML

Прежде всего, HTML расшифровывается как HyperText Markup Language.

Гипертекст (hypertext) это текст, который содержит ссылки на другие тексты. В принципе, это то чем является Веб. Один документ ссылается на другой документ, тот ссылается на следующие и так далее.

Очевидно, сегодня это уже не только текст, но и медиа. Мы можем смотреть видео, слушать музыку и т.д. По сути, это расширение гипертекста.

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

К тому же, HTML неплохо читаем человеком.

Последнее слово это язык (language). Язык имеет свой синтаксис, это означает что есть правильный и неправильный путь написания.

В примере ниже закрытие тега <div> происходит в неправильном порядке, что может послужить причиной ошибок.


<h1>
  <div>Hello world!</h1>
</div>

А в этом примере показан правильный порядок.


<h1>
  <div>Hello world!</div>
</h1>

Технологии, на которых держится Веб

Давайте поговорим о технологиях, на которых держится Сеть: HTML, CSS и JavaScript.

HTML предоставляет структуру документа, то есть какие компоненты он имеет. К примеру, он может иметь один заголовок, два параграфа и футер.

Обратите внимание, что это не говорит вам ничего о том, как эти компоненты должны выглядеть визуально, какой цвет и размер шрифта иметь.

Как если вы знаете что дом состоит из кухни и комнаты, но не знаете какого они цвета и как оформлены.

Цвет и стиль — это роль CSS. Цвета, макет, стиль и размер шрифта, и все прочие вопросы оформления.

Третий компонент, JavaScript, определяет поведение и функциональность. К примеру, что происходит после загрузки страницы или что просхойдет при клике на заголовок. Работа JS — предоставить эти функции.

Давайте посмотрим пример всего этого.


<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Структура HTML (до)</title>
  </head>
  <body>
    <h1>Структура HTML</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus elementum mauris eu auctor.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus elementum mauris eu auctor. Donec commodo vestibulum tincidunt. </p>
    <footer>
      <hr>
      <p>Тех. поддержка: support@we-have-lunch.com</p>
    </footer>
  </body>
</html>

Заголовок, пара параграфов, футер с адресом (не работающей) поддержки…

Давайте добавим в тот же документ немного стилей и поведения.


<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Структура HTML (после)</title>
  </head>
  <body>
    <h1 style="text-align: center; color: green; font-size: 60px;">Структура HTML</h1>
    <p style="font-size: 1.5em; margin: 0 100px 0 100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus elementum mauris eu auctor.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus elementum mauris eu auctor. Donec commodo vestibulum tincidunt.</p>
    <footer>
      <hr>
      <p style="text-align: center;" 
         onclick="alert('Отправка сообщений бесполезна...');">
         Тех. поддержка: support@we-have-lunch.com
      </p>
    </footer>
  </body>
</html>

Теперь давайте посмотрим на оба этих документа в браузере.

В первом нет ничего особенного. Заголовок, пара параграфов и т.д.

Но во втором примере очевидно добавление стилей. Заголовок стал зеленым, расположенным по центру, стал крупнее. Первый параграф тоже немного изменил свой вид, как и футер.

И если мы кликнем по адресу e-mail внизу, появится сообщение.

Что, кстати, соответствует опыту большинства людей по поводу текстовой поддержки…

Как вы видите, добавились некоторые стили и поведение, но структура осталась точно той же.

Вкратце

HTML размечает контент и определяет структуру документа.

Как и любой язык, он имеет правильный и неправильный синтаксис.

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

Этот пост представляет собой небольшую заметку о компонентах, которыми нужно владеть Ruby on Rails разработчику.

В прошлых постах я довольно подробно рассмотрел основы Ruby и Rails, но возможно у меня не хватит времени на разбор чуть более продвинутых компонентов. Которые, впрочем, вы можете изучить и самостоятельно, зная основы.

Что такое ORM

ORM сопоставляет объект и реляционную базу данных.

Object-relational mapping — объектно-реляционное сопоставление.

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

Также ORM упрощает написание кода для доступа к базе данных.

В Rails, Модель обычно использует какой-то ORM-фреймворк.

Фреймворком по умолчанию является Active Record.

Базы данных

SQLite довольно легкая и простая база данных, но для большинства проектов вам могут понадобиться такие базы данных как PostgreSQL или MongoDB.

Postgres является объектно-реляционной базой данных, она хорошо подходит для хранения разнообразной информации.

MongoDB является NoSQL базой данных, она использует JSON-подобные документы. Она также подходит для хранения больших объемов данных или медиафайлов.

Иногда вам могут встречаться прочие БД, например MySQL.

CRUD

CRUD (create, read, update, delete) — четыре базовые функции, используемые при работе с базами данных и прочими хранилищами информации:

  • Создание
  • Чтение
  • Редактирование
  • Удаление

Пример:

Операция SQL-оператор HTTP-операция
Создание (create) INSERT POST
Чтение (read) SELECT GET
Редактирование (update) UPDATE PUT или PATCH
Удаление (delete) DELETE DELETE

Также CRUD может означать пользовательский интерфейс с такими функциями.

В этом посте я расскажу о развертывании приложения на Heroku.

Прежде всего, что такое Heroku? Heroku — это PaaS. Платформа как услуга (Platform as a Service). Некоторые люди называют это облаком.

Они позволяют развертывать приложения на своей платформе.

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

Так что, вы можете зарегистрироваться бесплатно на heroku.com.

Heroku CLI

Heroku имеет CLI — интерфейс командной строки (command line interface). Он позволяет вам управлять вашими приложениями на Heroku.

Раньше он назывался Heroku Toolbelt.

Установка довольно простая и описана на их сайте: https://devcenter.heroku.com/articles/heroku-cli.

Последние шаги

Heroku использует Postgres и рекоммендует gem rails_12factor.

Так что, нужно перенести gem sqlite в режим разработки, а нужные gem’ы добавить в режим production.

После добавления gem’ов, запустите bundle и сделайте коммит в свой локальный репозиторий.

Пишем в терминале heroku login, вводим e-mail/пароль.

После успешной авторизации, выполняем heroku create name, где name — имя приложения. Если вы не вводите его, Heroku выберет свободное имя для вас.

Другая вещь, которую Heroku делает при выполнении этой команды, это создание удаленного git-репозитория, в который вы можете сделать push.

Можете это проверить с помощью git remote -v или git branch -av.

Это практически всё. Далее вы делаете git push heroku master и наблюдаете за результатом.

Не забудьте убедиться, что корневая папка вашего репозитория содержит папки и файлы Rails-приложения (такие как app и т.д.). Это то как Heroku узнает какое это приложение.

Можно выполнить heroku open, это откроет ссылку в браузере.

Теперь ваше приложение не на локалхосте, ваше приложение работает в реальном вебе.

В итоге

Зарегистрируйтесь на Heroku и скачайте их CLI.

Не забудьте сделать изменения в Gemfile.

В этом небольшом посте мы рассмотрим интеграцию Rails с HTTParty.

Для начала добавляем HTTParty в Gemfile.

Затем выполняем команду bundle install или просто bundle.


(…)

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

Gem’ы загружаются при запуске сервера, поэтому это один из нескольких случаев, когда следует перезапускать его.

В этом посте мы рассмотрим Bundler и управление gem’ами внутри вашего Rails-приложения.

Если вы зайдете на bundler.io, вы увидите, что «Bundler обеспечивает согласованную среду для проектов Ruby, отслеживая и устанавливая точные gem’ы и версии, которые необходимы».

Bundler

Bundler позволяет вам указывать gem’ы (и связанные с ними зависимости) для Rails-приложения внутри файла Gemfile (в его корневой директории).

Это наиболее предпочтительный способ управления зависимостями gem’ов в Rails.

Чтобы использовать его, выполните bundle install или просто bundle после указания нового gem’а в Gemfile.

Если вы изменяете версию gem’а, выполните bundle update.

Кроме того, вы можете сказать Rails (опять же, через Gemfile) загружать определенные gem’ы только в определенных окружениях.

К примеру, некоторые gem’ы можно указать только для среды разработки или тестирования.

Какая версия устанавливается

Если вы не указываете ничего, вы получаете последнюю версию.

Вы также можете указать точную или примерную версию.


gem 'rails', '4.2.6' # точная версия
gem 'sqlite3' # последняя версия
gem 'uglifier', '>= 1.3.0' # версия старше (или равная) 1.3.0

Другой пример:


gem 'thin', ">= 1.1", "< 2.0" # не менее 1.1, но менее 2.0
gem 'thin', "~>= 1.1" # то же, что и в примере выше

Подобное значение может указываться, потому что часто при переходе на новую версию gem’ы (и программное обеспечение вообще) могут менять или удалять определенные API.

Во втором варианте этого примера, bundler отбрасывает последнее число и увеличивает первое, чтобы получить верхний лимит номера версии.

Пример Gemfile

Приложение может даже использовать другую версию Rails, если вы меняете версию в Gemfile и выполняете bundle update.


source 'https://rubygems.org'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.6'

Кроме того, Bundler создает файл Gemfile.lock, который содержит фактические версии gem’ов с их зависимостями, которые использует ваше приложение.

bundle exec

Скриншот документации:

Допустим, у вас есть три или четыре разные версии, скажем, rake. Может быть не так очевидно, какую из них использовать.

При выполнении bundle exec rake вы будете точно знать, что выполняется версия из Gemfile.

В итоге

Bundler управляет зависимостями gem’ов.

Он загружает gem’ы при запуске приложения.

В этом посте мы рассмотрим gem’ы в Ruby в общем, а также конкретный gem под названием HTTParty.

Итак, RubyGems — это, в целом, менеджер пакетов. Вы можете посмотреть информацию о нём на сайте rubygems.org. Там действительно можно найти сотни и тысячи сторонних gem’ов.

Также, Gem — это менеджер пакетов, который устанавливается вместе с установкой Ruby. Вы можете выполнять такие команды как gem install name.

Если вы хотите узнать, установлен ли gem, вы можете сделать gem list, в этом случае httparty.

Если он не установлен, выполните команду gem install httparty.

Вы также можете увидеть больше деталей о gem’е с помощью команды gem list httparty -d.

Что такое Restful веб-сервисы

Restful веб-сервисы это простые веб-сервисы реализованные с помощью HTTP (и принципов REST), которые:

  • Имеют базовый URI
  • Поддерживают форматы обмена данными такие как JSON и XML (и, возможно, другие)
  • Поддерживают набор HTTP-операций (GET, POST и т.д.)

Вместо того, чтобы думать о вебе в целом как о куче HTML-страниц, подумайте о нём как о том, что больше соответствует MVC-шаблону, который мы обсуждали.

Веб-сайт это что-то, что просто хранит какие-то ресурсы. Когда вы переходите на сайт, вы можете получить эти ресурсы в любом из форматов. Возможно, вы получите их в качестве HTML, возможно в качестве JSON или XML, которые могут быть разными форматами для представления одного и того же.

Некоторые форматы легче парсить, чем другие. К примеру, HTML не очень подходит для парсинга, но XML и JSON подходят хорошо.

Означает ли это, что вы должны изучить полностью новый формат и писать парсер для него в Ruby?

Нет, потому что это как раз то где на помощь приходит HTTParty.

Gem HTTParty

HTTParty это клиент для Restful веб-сервисов.

Представьте браузер. Ваш браузер является клиентом веб-сайта, и чаще всего вы видите HTML-страницы в нём.

Ваш браузер запрашивает что-то с сервера, сервер возвращает это, и браузер это отображает.

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

HTTParty обеспечивает автоматический парсинг JSON и XML в ваши хэши (или массивы) Ruby.

Пока формат является валидным JSON или XML, HTTParty легко парсит данные в структуры Ruby, и затем вы можете просто использовать их.

Использование HTTParty

Это, на самом деле, довольно просто. Включаете модуль HTTParty в код и вы готовы!

Вы также можете указать:

  • base_uri для ваших запросов
  • default_params (к примеру, ключ API)
  • format, чтобы указать в каком формате данные

Плагин JSONView

Для браузеров (Chrome, Firefox и возможно других) есть плагин JSONView, который позволяет удобно просматривать файлы JSON.

С этим плагином JSON API будет выглядеть примерно так:

В общем, рекомендую установить.

Пример URL в API

Пример URL в API:

Через ? указываются параметры, второй параметр (как и следующие) указывается через &.

В данном примере мы запрашиваем контент определенного изображения с параметрами высоты и ширины не ниже заданных размеров.

В итоге

HTTParty позволяет чрезвычайно просто интегрировать Restful-сервисы, конвертируя их в хэши Ruby.

Поддерживаются форматы JSON и XML.

В этом посте мы рассмотрим:

  • Что такое хелперы и чем они полезны
  • Зачем использовать Rails-хелпер link_to

Хелперы

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

Что если мы хотим форматировать то, как выглядит это время?

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

Должен ли он быть в контроллере? Вряд ли, потому что контроллер должен быть независим от формата представления.

Так что, здесь приходят на помощь хелперы.

Каждый раз, когда вы генерируете контроллер, также генерируется (пустой) хелпер.

Давайте добавим в него метод.

Интересно то, что метод внутри хелпера будет доступен для всех view в вашем приложении.

Не забываем указать formatted_time(@time) во view.

И это работает, на странице показывается отформатированное время.

Встроенные в Rails хелперы: link_to

Rails предоставляет много встроенных хелперов.

Один из них, это хелпер link_to.

link_to name, path генерирует гиперссылку, которая отображает имя (name) и ссылается на путь (path).

В вашем HTML вы будете иметь тег <a>.

Путь может быть обычной строкой или маршрутом указанным в файле routes.rb, и оканчиваться на _url (полный путь) или _path (относительный путь).

Это полезно потому, что вы можете указать переменную, и ваша страница изменится автоматически, если изменится эта переменная.

link_to в действии

Добавим пару ссылок в наш view.

Первый параметр это имя.

В первом примере мы ссылаемся на Google и определяем полный URL, во втором — используем внутренний путь, определенный в routes.rb.

Конечно, это будет работать без проблем.

В итоге

Хелперы являются «макросами» для вашего Представления.

При использовании link_to, нет необходимости что-то менять, когда меняется путь.
Поэтому он может быть удобнее простого HTML-тега.

В этом посте мы рассмотрим то, как перенести бизнес-логику из Представления в Контроллер в соответствии с MVC-паттерном.

Также мы поговорим о том, как долго переменные экземпляров контроллера остаются на месте.

Действия (методы) внутри контроллера

Если действие (метод) ничего не делает, мы можем просто убрать его.

Пока определен правильный маршрут и есть правильно названный файл/шаблон представления, действие не обязано присутствовать, и Rails найдет правильный шаблон при помощи конвенции.

Контроллер: новый вид

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

Но, конечно же, есть причина иметь действия внутри контроллера, они не просто для декорации.

Переносим бизнес-логику

Наше приложение работает, но бизнес-логика не должна находиться во View. Представление должно иметь настолько мало Ruby-кода, насколько это возможно.

Давайте перенесем эту бизнес-логику из Представления в Контроллер.

Переменные экземпляров из контроллера доступны внутри view.

Попробуем также добавить счетчик просмотров. Изначально, @times_displayed будет равняться 0, и с каждым просмотром страницы это число должно увеличиваться на 1.

Здесь мы просто используем переменные из контроллера.

Посмотрим что получилось.

В обоих случаях просмотрено 1 раз? Интересно.

Переменные экземпляров в Rails

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

Таким образом, каждый новый запрос создает новую переменную экземпляра.

Какие альтернативы? Можно хранить их в HTTP-сессии, либо в базе данных.

В итоге

Старайтесь держать бизнес-логику вне View.

Переменные экземпляров в контроллере доступны для View.

Переменные экземпляров не задерживаются между запросами.

В этом посте мы рассмотрим как работает маршрутизация, что такое Rake и как анализировать ваши маршруты.

Маршруты

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

Перед тем как контроллер может скоординировать куда идет веб-запрос, этот запрос должен быть направлен к контроллеру.

Так как работало действие «hello»?

Маршрут к нему был автоматически сгенерирован, когда мы выполняли rails g controller.

Давайте дополним цикл MVC из одного из прошлых постов.

  1. Отправлен запрос
  2. Маршрутизатор направляет запрос к контроллеру
  3. Контроллер ← → Модель
  4. Контроллер запускает Представление
  5. Представление отображает данные

routes.rb

Все маршруты должны быть указаны (вручную или с помощью генератора) в файле config/routes.rb.

Как этой файл выглядит?

Изначально в нём много комментариев.

Запись get 'greeter/hello' означает, что когда вы отправляете get-запрос, к примеру в браузере, он должен быть интерпретирован как «контроллер greeter, действие hello».

Давайте добавим маршрут для действия goodbay.

Мы можем указать просто get 'greeter/hello' (или 'greeter/goodbay'), или мы можем указать это в стиле get 'greeter/hello' => "greeter#hello", что означает, что этот запрос направляется к «контроллер greeter, действие hello».

В данном примере они не имеют разницы, но если бы вы хотели указать другой адрес слева, вы бы использовали именно второй способ.

Итак, наш маршрут для goodbay работает.

Rake

Rake это язык сборки Ruby. Его имя происходит от «Ruby’s make».

В отличие, к примеру, от Ant в Java, он не написан на XML, он написан только на Ruby.

Rails использует Rake для автоматизации связанных с приложением заданий, к примеру операций с базой данных, тестами и т.д.

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

Также можно запросить описание индивидуального задания с помощью rake --describe.

rake routes показывает все ваши указанные маршруты.

В итоге

Маршрут направляет запрос к правильному контроллеру.

rake routes позволяет увидеть какие маршруты на данный момент определены в вашем приложении.