Пишем HTML-виджет для приложения IBOOK Author

Ни для кого не секрет, что печатные книги уходят в прошлое. Им на смену приходит новое поколение устройств (а вместе с ними и программ), которые позволяют не только прочитать материал, подобно книге, но и разнообразить чтение интерактивными вставками. Это может быть как и некий динамически изменяющийся материал (лента твиттера и т.п.), так и некое интерактивное содержание (анимация работы конденсатора и т.п.)
Компания Apple выпустило приложение IBOOK Author, которое позволяет делать интерактивные книги для приложения IBOOKS устройств IPAD. Сегодня я предлагаю познакомиться с тем, как же создавать HTML-виджеты для данного приложения на примере виджета твиттера.
Для создания виджетов существует множество программ, стоимость которых варьируется от 0 (Dashcode) до 60 (Tumult Hype).
Создавать же свой виджет мы будем «вручную», без использования специализированных программ.
Теперь предлагаю перейти от слов к делу.

Структура виджета

HTML виджет для IBOOK — это папка с расширением wdgt.
При создании HTML виджета можно выделить следующие обязательные файлы:

  • Default.png = Файл — превью виджета. Данное изображение будет демонстрироваться пользователю, пока он не запустит виджет. Имя файла строгое и регистрозависимое. Разрешение виджета (если не задано иных параметров) будет равно разрешению данной картинки.
    Retina: Если создается виджет, поддерживающий Retina дисплеи, то должен быть создан также файл Default@2x.png, который имеет в два раза большее разрешение, чем оригинальный Default.png.
  • Основной HTML файл — название данному файлу можно задать любое. Является основной функциональной частью виджета. Может включать как и css, так и js файлы (здесь ограничений нет, все аналогично написанию веб-страниц)
    Retina: Для поддержки необходимо писать аналогично веб-страницам для Retina дисплеев (на хабре уже мелькали статьи на эту тему )
  • Info.plist — файл конфига для виджета. Содержит информацию о названии виджета, его разрешении, основном HTML файле и т.д. Остановимся на нем немного подробнее…

Info.plist — что в конфиге?

Данный файл конфига представляет собой ничто иное, как xml файл, в котором параметры записываются как

<key>Параметр</key>   <тип данных>Значение</тип данных>

Используемые параметры:

  • CFBundleDevelopmentRegion — Необязательный параметр, как правило, описывает родной язык создателя виджета. Его значениями могут быть English, Russain
  • CFBundleDisplayName — Обязательный параметр, значением которого является строка с названием виджета. В нашем примере укажем Twitter
  • CFBundleIdentifier — Обязательный параметр — строка, однозначно идентифицирующая виджет. Используется инвертированное доменное имя. Например: ru.MySite.widgets.Twitter
  • CFBundleName — Необязательный параметр, представляется строкой определяющее название виджета.
  • CFBundleVersion и CFBundleShortVersionString — необязательные параметры — строки, содержащие версию виджета. «длинную» и «короткую» версии соответственно
  • Height и Width — необязательные параметры. — значением данных параметров являются числа, определяющие высоту и ширину виджетов
  • IBNotifiesOnReady — Необязательный параметр. При установке данного параметра в true — виджет должен сообщить приложению, когда необходимо перейти к HTML коду, убрав картинку (при загрузке виджета, пока он не будет готов, отображается Default.png) Данный параметр целесообразно ставить в true, в случае если перед отображением данных виджет должен сделать «сложные вычисления», либо собрать данные с нескольких серверов… (в общем случае — когда виджет будет «подготавливать информацию» некоторое время). В остальных случаях его лучше поставить в false. Переключение от картинки к HTML коду происходит по widget.notifyContentIsReady ()
  • MainHTML — представляется строкой, определяет имя основного html файла виджета

Использование данных параметров будет достаточным для создания первых виджетов.

Теперь приступим непосредственно к реализации виджета.

Непосредственно реализация виджета

Планируем работу виджета

Для того, чтобы автор мог контролировать виджет, возьмем за начальные условия:

  1. Виджет при запуске отправляет запрос на сервер, получает список пользователей\хештегов, которые должен отобразить
  2. Формирует данные в нужнный для твиттера «формат»
  3. «Импортирует» скрипт Twitter API, ожидает его ответа
  4. Оформляет данные в понятное для пользователя представление

В данном виджете будем использовать библиотеку JQuery (для упрощения работы с JSON и создания AJAX запросов)

HTML-файл

Не представляет «практической» пользы в данном примере. Содержит контейнер для будущих твитов:

<!DOCTYPE html> <html> <head>     <meta http-equiv="content-type" content="text/html; charset=utf-8"> 	<script type="text/javascript" src="jquery.min.js"></script>     <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body>      <input type="hidden" id="ID" value="SomeWidgetIDForServerQuery" />     <div id='tweet-container'> 	</div> 	<script type="text/javascript" src="ServerQuery.js"></script> </body> </html> 

JavaScript начинка

Главной задачей скрипта будет отправка AJAX запросов к серверам. Здесь существует одно ограничение. В прямом виде такие запросы отправить нам не получится. Точнее запрос уйдет на сервер, сервер его обработает, но принять данные виджет не сможет. Поэтому выходом из данной ситуации будет использование JSONP.
Что это такое? Это паттерн, который позволит нам отправить данные на удаленный сервер и «обойти» политику ограничения доменов.
Как выглядит данный способ?
Виджет создает GET запрос, в параметрах которого(помимо нужной информации) указывает функцию callback. Сервер возвращает данные, обернутые в вызов JavaScript функции в формате

callback-функция(Данные в формате JSON);

Определим данные, которые будет отправлять сервер: допустим данные будут содержать только один параметр results, который будет представлен как массив элементов name (включаем сюда, как пользователей, так и хештеги)
Примерный ответ сервера:

jsonp_callback({"results":[{"name":"user1"},{"name":"#hashCode1"}]});

Напишем скрипт, который будет делать запрос на сервер и обрабатывать полученные данные, переводя в «нужный» для твиттера формат:
(формат простой — твиты пользователя определяются как from: пользователь, связь между различными фильтрами поиска проводится посредством "+OR+", хеш-теги не меняются за исключением переноса # в символ %23)

//В этой переменной накапливаем строку для запроса var requestStr = "";  //Переводит один "поисковой фильтр" в часть запроса function PrepareItem(item) { 	if (requestStr != "") 		requestStr += '+OR+'; 	if (item[0] != "#") 	{//перевод поиска твитов по пользователю 		requestStr += 'from:' + item; 	} 	else 	{//перевод поиска по хеш-тегу 		requestStr += '%23'; 			for (var index = 1; index < item.length; index++) 			    requestStr += item[index]; 	} }  $(document).ready(function() { $.ajax({   //Определение формата передачи данных   dataType: 'jsonp',               jsonp: 'jsonp_callback', //в GET запрос под этим названием и будет функция-callback   url: "http://mySite.ru/widgets/twitter.php",   data: { ID:$('#ref').val() },  success: function( result ) { 			$(result.results).each(function(item) 			{  				PrepareItem(item.name); 			}); 			//Организуем запрос к твиттеру (чуть ниже будет ее описание) 			CreateQueryToTwitter(requestStr);           } });

Однако JSONP предполагает и второй способ передачи данных (физически он не отличается от первого — разница только в программных реализациях) — именно вторым способом мы и воспользуемся для передачи запроса твиттеру.

Данный способ заключается в добавлении в HTML код элемента «script», тело которого пусто, а src содержит такой же GET запрос с указанием функции callback и других параметров.

После отправки запроса нам остается только разобрать ответ твиттера (самая полезная информация находится в элементе results) и отформатировать его.

function CreateQueryToTwitter(request) { 	var newScript = document.createElement('script');	 	newScript.setAttribute("type", "text/javascript");//организуем скрипт 	newScript.setAttribute("src", "http://search.twitter.com/search.json?q=" + request + "&callback=tweetResponse&rpp=40"); 	//добавляем его к HTML коду 	document.getElementsByTagName("head")[0].appendChild(newScript); }   function tweetResponse(result) { 	var container=$('#tweet-container'); 	container.html('');	 	//обрабатываем ответ 	$(result.results).each(function () { 	    var str = ('	<div class="tweet">\ 			<div class="avatar"><a href="http://twitter.com/'+this.from_user+'" target="_blank"><img src="'+this.profile_image_url+'" alt="'+this.from_user+'" /></a></div>\ 			<div class="user"><a href="http://twitter.com/'+this.from_user+'" target="_blank">'+this.from_user+'</a></div>\ 			<div class="txt">' + formatTweet(this.text) + '</div>\         '); 	container.append(str);	 	});	 	 }    //Создадим гиперссылки на людей, другие ссылки и хештеги function formatTweet(str) { 	str=' '+str; 	str = str.replace(/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>'); 	str = str.replace(/([^\w])\@([\w\-]+)/gm,'$1@<a href="http://twitter.com/$2" target="_blank">$2</a>'); 	str = str.replace(/([^\w])\#([а-я,А-Я,a-z,A-Z,\-]+)/gm,'$1<a href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>'); 	return str; }

Остается только прописать стили для виджета и HTML код готов:

body { 	font-family: Tahoma,Arial,Verdana,sans-serif;	 	width:1024px;     margin: auto; 	height:768px; }  #tweet-container { 	overflow-y:scroll; 	height:768px; 	width:660px;     margin: auto; }  .tweet { 	color:black;     margin-top:5px;     background-color:#F0F1F4;     border-bottom:3px solid #5ea8de;     padding:10px;     margin-left:5px;     width:600px;     height:autopx; }  .avatar { 	float:left; }  .avatar:hover { 	opacity:0.5; }  .user { 	 	float:left; 	padding-left:10px; }  .user a { text-decoration:none; 	color:black; 	font-size:1.1em; } .user a:hover { color:#DB4FDB }  .txt { 	clear:left; } 

Теперь добавим к данной веб-страничке файл Info.plist. В моем виджете он выглядит так:

	<?xml version="1.0" encoding="UTF-8"?> 	<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> 	<plist version="1.0"> 	<dict> 		<key>BackwardsCompatibleClassLookup</key> 		<true/> 		<key>CFBundleDevelopmentRegion</key> 		<string>Russian</string> 		<key>CFBundleDisplayName</key> 		<string>twitter</string> 		<key>BRNotifiesOnReady</key> 		<true/> 		<key>CFBundleIdentifier</key> 		<string>ru.mySite.widget.twtter</string> 		<key>CFBundleName</key> 		<string>twitter</string> 		<key>CFBundleShortVersionString</key> 		<string>1.0</string> 		<key>CFBundleVersion</key> 		<string>1.0</string> 		<key>KFNotifiesOnReady</key> 		<false/> 		<key>Height</key> 		<integer>768</integer> 		<key>MainHTML</key> 		<string>main.html</string> 		<key>Width</key> 		<integer>1024</integer> 		<key>IBNotifiesOnReady</key> 		<false/> 	</dict> 	</plist> 

Таким образом, остается только переименовать папку, добавив к ней расширение .wdgt и его можно смело использовать в Ibook Authors.

В заключении

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

Надеюсь данная статья не просто заняла Ваше время, но и будет чем-то полезна. 🙂

ссылка на оригинал статьи http://habrahabr.ru/post/171141/

Microsoft Surface RT появятся в продаже в России

Microsoft расширяет географию продаж своих компьютеров серии Surface.

Согласно опубликованному пресс-релизу, уже в конце марта начнутся официальные продажи Surface RT в России, Японии, Мексике, Новой Зеландии, Тайване и Сингапуре. К сожалению, в списке стран, где в ближайшие месяцы начнутся поставки Surface Pro, России пока нет (зато есть Великобритания, Австралия, Новая Зеландия, Франция, Германия, Китай и Гонконг).

На данный момент, Surface RT доступен в США, Канаде, Китае, большинстве стран Европы и Астралии. Устройство основано на ARM-процессоре Nvidia Tegra 3, оснащено 2 ГБ оперативной и 32 или 64 ГБ постоянной памяти (+ возможностью использования SDXC-карт), имеет 10,6-дюймовый экран с разрешением 1366 x 768 пикселей и работает под управлением Windows RT.

ссылка на оригинал статьи http://habrahabr.ru/post/171137/

Urbee 2: реальный автомобиль, отпечатанный на 3D принтере

Не так давно на Хабре появилась новость о том, что NASA собирается отправить на Марс ракету, многие детали которой печатаются на 3D принтере. Оказывается, есть и другие проекты уже земных транспортных средств, которые планируется печатать на 3D принтере (правда, кроме двигателя и прочих элементов, которые ну никак не отпечатаешь, по крайней мере, пока). Один из таких проектов — Urbee 2, автомобиль, представляющий собой не концепт, а уже серийную модель.

Автор проекта Urbee 2, Джим Кор, на днях подробно рассказал одному из популярных СМИ о своем автомобиле. Последний представляет собой трехколесный гибрид, который создается из металлического каркаса и 50 пластиковых элементов. По словам разработчика, вес автомобиля — всего 544 килограмма, а его прочность — на уровне прочности стандартных авто.

Для создания пластикового корпуса используется пластик ABS, посредством печати типа Fused Deposition Modeling (FDM). FDM — вид 3D печати, когда очень тонкие слои пластика (микроскопически тонкие) наносятся один на другой, до полной готовности создаваемого объекта. Процесс настолько автоматизирован, что разработчики ставят, к примеру, бампер на «печать», и уходят пить кофе (ну, или работать над другими элементами, тоже вариант). Через несколько часов конструкция полностью готова. Для создания полностью готового автомобиля требуется около 2,5 тысяч часов.

Что интересно, Urbee 2 во многих странах и регионах не потребуется даже регистрировать, как, собственно, автомобиль. Благодаря его характеристикам, Urbee 2 в большинстве стран можно будет регистрировать, как мотоцикл. Автомобиль гибридный, о чем уже говорилось в начале новости. А значит, его оснащают и бензиновым движком, и аккумуляторной батареей.

К сожалению, ходовые характеристики автомобиля неизвестны (т.е. неизвестна возможная скорость автомобиля). Зато разработчик собирается проехать около 4,6 тысяч километров всего на 37,8 литрах топлива. Правда, Джим Кор не рассказал, будет ли он заряжать аккумулятор своего автомобиля во время путешествия.

Urbee 2 вскоре поступит в серию, и на него есть уже 14 предзаказов. Что касается цены, то прототип обошелся команде разработчиков в 50 тысяч долларов. Само собой, если запустить Urbee 2 в серию, то себестоимость авто будет во много раз ниже (во всяком случае, в большинстве случаев так и случается).

Via Wired

ссылка на оригинал статьи http://habrahabr.ru/post/171135/

Суперкомпьютер IBM Watson может стать вашим следующим шеф-поваром или врачом

image

Оснащённый системой искусственного интеллекта суперкомпьютер IBM Watson разбирается не только в диагностической медицине, но и в создании новых кулинарных рецептов.

Как пишет VentureBeat, Watson уже получил некоторый успех в качестве диагностического ассистента в нескольких американских медицинских центрах, но теперь IBM ищет возможности применения мощных способностей суперкомпьютера и в других сферах.

Среди новых проектов применения Watson — разработка кулинарных рецептов, создание новых фармацевтических препаратов, а также предсказание того, когда промышленным машинам понадобится техническое обслуживание.

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

Представленность IBM в индустрии больших данных будет только расти, если компании удастся поставить Watson на коммерческие рельсы. IBM утверждает, что уже выполняет работу с данными и аналитику для более 10 тысяч клиентов. Для этого компания нанимает 400 математиков и 9 тысяч экспертов-аналитиков.

По прогнозам IBM, если компания продолжит инвестировать в большие данные, то её доход от этой индустрии к 2015 году достигнет 16 млрд долларов. Watson пока что не приносит компании больших денег, но IBM считает, что проект окупится в будущем.

На видео ниже показано, как Watson диагностирует пациента и назначает ему лечение.

ссылка на оригинал статьи http://habrahabr.ru/post/171133/

Суперкомпьютер IBM Watson может стать вашим следующим шеф-поваром или врачом

image

Оснащённый системой искусственного интеллекта суперкомпьютер IBM Watson разбирается не только в диагностической медицине, но и в создании новых кулинарных рецептов.

Как пишет VentureBeat, Watson уже получил некоторый успех в качестве диагностического ассистента в нескольких американских медицинских центрах, но теперь IBM ищет возможности применения мощных способностей суперкомпьютера и в других сферах.

Среди новых проектов применения Watson — разработка кулинарных рецептов, создание новых фармацевтических препаратов, а также предсказание того, когда промышленным машинам понадобится техническое обслуживание.

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

Представленность IBM в индустрии больших данных будет только расти, если компании удастся поставить Watson на коммерческие рельсы. IBM утверждает, что уже выполняет работу с данными и аналитику для более 10 тысяч клиентов. Для этого компания нанимает 400 математиков и 9 тысяч экспертов-аналитиков.

If IBM continues its investments it big data, it predicts that revenue generated in the area will hit $16 billion by 2015. Watson specifically isn’t making the company big money yet, but IBM believes they will pay off down the road.
.99

ссылка на оригинал статьи http://habrahabr.ru/post/171131/