1.4. Язык метаразметки sass

Sass – это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.

Язык Sass имеет два синтаксиса:

Старый – sass – отличается отсутствием фигурных скобок, в нём вложенные элементы реализованы с помощью отступов;

Новый – SCSS (Sassy CSS) – использует фигурные скобки, как и сам CSS.

Так к примеру

#header

background: #FFFFFF

.error

color: #FF0000

, a

text-decoration: none

&:hover

text-decoration: underline

будет преобразовано в

#header {

background: #FFFFFF;

}

#header .error {

color: #FF0000;

}

#header a {

text-decoration: none

}

#header a:hover {

text-decoration: underline

}

[6]

На этом примере была доказана целесообразность использования Saas в связке с Haml нежели Css в связке с Html. Sass добавляет к Css константы и примеси, что ещё более упрощает вёрстку(Haml) для веб. Существует также аналогичный динамический язык стилей Less, но так, как Sass и Haml входят в стандартную поставку Ruby, то в работе будет использоваться именно Sass и Haml.

1.4. Дополнительные модули языка Ruby

Для работы веб-приложения были необходимы дополнительные модули такие, как «mechanize» и «sinatra».

Mechanize – библиотека, реализующая доступ к сайтам с сохранением состояния – в первую очередь куков, как браузер. Эта библиотека позволяет парсить (доставать) сайт с помощью css и xpath селекторов [7].

Sinatra – бесплатный и открытый программный каркас написанный на языке Ruby, предназначенный для разработки веб-приложений. Он является альтернативой таким популярным фреймворкам на Ruby как Ruby on Rails и Merb [8].

Фреймворк был спроектирован и разработан Блейком Мизерани. Sinatra представляет собой небольшое и гибкое приложение, которое, однако, не следует типичному паттерну Model-View-Controller (модель-представление-контроллер), который часто применяется в веб-фреймворках, как например в Ruby on Rails. Вместо этого Sinatra фокусируется на идее быстрого создания веб-приложений на Руби с минимальными усилиями [8].

2. Практическая часть

2.1. Постановка задачи

Необходимо написать веб-приложение, которое бы извлекало с сайта нужную информацию. Пользователь веб-приложения вводит необходимые критерии поиска, на что приложение выдаёт ему нужную информацию. Необходимо также ввести некоторый критерий нужности и точности (релевантности) найденной информации.

В данной работе рассматривается пример формирования списка учебной литературы по заданной учебной дисциплине.

2.2. Разработка веб-приложения

Чтобы веб-приложение заработало в соответствии с заданными функциями необходимо организовать http сервер.

Этот сервер будет организован с помощью ruby-модуля «Sinatra».

Рассмотрим данный код.

# coding: utf-8

require 'mechanize' //подключаем модуль «mechanize»

require 'sinatra' //подключаем модуль «sinatra»

require './my' //подключаем модуль «my» из локальной директории

require 'json' //подключаем модуль «json» для работы с json

enable :static //разрешение для использования статичного содержимого

set :server, 'webrick' //настройка того, какой модуль будет обслуживать низкоуровневые http запросы

get '/' do //обработка запроса к корневой директории сервера(localhost:8080/)

haml :index //передаём на обработку шаблонному движку haml страницу index.haml

end

get '/find' do //обработка директории localhost:8080/find

@param=params[:q]

@f=func(@param,params[:y1],'2013')

haml :find

end

В Ruby функциональные блоки кода (if,def,for …) выделяются отступами. Например, описание функции выглядит так:

def doSomething(a,b)

if(a>b)

return True

else

return False

end

end

Когда пользователь обращается к корневой директории сервера / - север возвращает страницу index.haml, прошедшую через haml-движок, который выдаёт браузеру готовый валидный html- код.

В Haml и Sass так же, как и в Ruby выделение основных частей осуществляется с помощью отступов. То есть там, где в html открывается новый тег, в haml создаётся новый уровень вложенности.

На нашем сервере следующая иерархия директорий и файлов:

/

views

find.haml

index.haml

footer.haml

form.haml

public

style.sass

script.coffee

style.css

Основным файлом здесь является файл index.haml. Данный файл содержит в себе форму задачи критериев поиска. Ниже дано содержание файла index.haml

%html

%head

%link{rel:'stylesheet',href:'style.css'}

%body

%center

.container

.header

=haml :form

Все теги начинаются с символа «%», а код на Ruby вставляется с помощью символа «=». Этот код определяет такую структуру веб-документа:

Документ

Центрирование нижележащих элементов

Блок с классом «container».Это основной блок

Шапка документа

Форма поиска(файл form.haml)

Файл формы поиска будет немного объёмистее и сложнее:

%form{method:'GET',action:'find'}

%table.form

%tr

%td.right

%label{for:'q'} Что искать:

%td

%input.q{type:'text',name:'q'}

%tr{align:'right'}

%td.right

%label{for:'y',align:'right'} Год издания до:

%td

%select.y{name:'y1'}

%option 2000

%option 2001

%option 2002

%option 2003

%option 2004

%option 2005

%option 2006

%option 2007

%option 2008

%option 2009

%option 2010

%option 2011

%option 2012

%option 2013

%option 2014

%option 2015

%option 2016

%option 2017

%option 2018

%option 2019

%option 2020

%option 2021

%option 2022

%tr{align:'center'}

%td.center{colspan:'2'}

%br

%input.submit{type:'submit',value:'Искать'}

Это «.center» обозначает класс «center» какого-либо элемента, а «#id» - id. Свойства тегов задаются в фигурных скобках. К index.haml подключены стили style.css, которые были скомпилированы из файла style.sass:

@mixin border-radius($radius: 1px) //миксин или некая функция

-webkit-border-radius: $radius

-moz-border-radius: $radius

border-radius: $radius

.main

width: 1000px

height: auto

background-color: black

#item

width: 100%

height: auto

text-align: left

@include border-radius(5px)

background-color: lighten(#545657,20)

margin-top: 5px

margin-down: 5px

.container

width: 1000px

height: auto

body

background-color: white

margin: 0px

td.left

text-align: left

td.right

text-align: right

td.center

text-align: center

select

width: 100%

input.submit

width: 300px

table.form

width: 400px

input.q

width: 100%

.header

width: 100%

height: 100px

background-color: grey

Специальная программа отслеживает изменения в файле style.sass, чтобы скомпилировать этот файл в style.css.

После того, как будут введены параметры поиска и форма отправлена на сервер, этот сервер выдаст пользователю файл find.haml, который имеет следующее содержание

%html

%head

%link{rel:'stylesheet',href:'style.css'}

%script{src:'script.js'}

%body

%center

=haml :form

.main

%center

-for i in @f do

#item

%strong Библиографическая ссылка:

%br

="   &nbsp"+i[0].to_s

%p

%strong Рейтинг:

%br

="   &nbsp"+i[1].to_s

Синтаксис Haml'а позволяет использование циклов, условий и перечислений.

Так «-for i in @f do» является итерацией по всем объектам, входящих в переменную @f. Эта особенность в разы сокращает время и усилия на написание веб-приложение. Haml и Sass являются «фасадом» приложения. А логика ж его определяется программным кодом, написанном на языке программирования Ruby, то есть кодом из файлов init.rb и my.rb. Код файла init.rb уже был описан выше, поэтому здесь приводится текст my.rb.

# coding: utf-8

require 'mechanize'

def mark(m,n)

i=n*m/(n+30)

j=7.2453*n/(n+30)

return i+j

end

def func(q,y1,y2)

m=Mechanize.new

link="http://window.edu.ru/catalog/resources?p_str=#{q}&p_year1=#{y1}&p_year2=#{y2}&p_sort=5&p_frubr=3.52.5"

link=link+"&p_page=1"

page=m.get link

links=[]

links<<link

page.search('table.pager').search('td').search('a').each do |i|

links<<'http://window.edu.ru'+i['href']

end

u=[]

links.each do |l|

o=m.get l

n=0

o.search('div.res_l').search("a.restitle").each do |i|

href='http://window.edu.ru'+i['href']

k='http://open.dapper.net/transform.php?dappName=diploma&transformer=HTML&extraArg_microFormat=1&applyToUrl='+href

j=m.get k

mark=j.search('span.mark')

mark=mark.text.to_f

biblio=j.search('span.biblio').text

num=j.search('span.num')

num=num.text.to_f

ma=mark(mark,num)

if ma>1

dl=''

if j.search('span.link')

dl=j.search('span.link').search('a')[0]['href']

u<<[biblio,ma,dl]

end

end

if u.size>=5

return u

end

end

end

return u

end

Этот программный код используется для поиска и извлечения информации. В качестве дополнительного инструмента используется сайт http://open.dapper.net. Этот сайт именно в этой работе даёт возможность извлечения библиографической информации нужной учебной литературы.