Архив рубрики: HTML

HTML

Я построил PhantomJS 2.1.1 для Raspberry Pi

Я построил PhantomJS 2.1.1 для Raspberry Pi. Он также может работать на любой armhf архитектуры машин.

Я использовал Debian на ARM VPS на https://www.scaleway.com/ и следовать эту страницу, чтобы построить его.

Вы можете скачать с https://github.com/mecrazy/phantomjs-binaries.
( После того, как мой запрос тянуть разрешено, я буду редактировать ссылку на этом блоге на “https://github.com/avaynshtok/phantomjs-binaries”. )

Я использую Raspberry Pi в качестве испытательной машины для любых серверных приложений, таких как веб-соскоб. Но не было никаких PhantomJS двоичные файлы для armhf архитектуры в Интернете. Так что я построил его. Пожалуйста, используйте этот двоичный файл, если вы хотите. Но я не могу заботиться какие-то проблемы и ошибки, когда вы его используете.

< Что такое "PhantomJS"? >
PhantomJS является веб-соскоб инструмент с JavaScript API. Она может захватить веб-страницы, как PDF, PNG или какой-то файл изображения. Если вы хотите узнать больше о PhantomJS, пожалуйста, проверьте http://phantomjs.org/.

Получить новую версию Google Таблицы как JSONP

< предупреждение >
Я рекомендую вам, чтобы получить дополнительную учетную запись Google только для общественности.
Потому что, если вы последуете моему процедуру, ваш адрес Gmail будет на файле общественного JSONP.

< Google Таблицы >
Старая версия Google Таблицы можете поделиться таблицы как XML, JSON и какой-то формате. Я думал, новая версия не имеет таких функций совместного использования. Но я нашел хорошее решение для новой версии Google Таблицы на ответ на вопрос о StackOverflow.
Unable to publish specific cells in new Google Spreadsheets – StackOverflow ( по-английски )
В соответствии с вышеуказанным странице, это API является своего рода старого API. Никто не знает, когда он останавливается. Мне все равно, эту ситуацию. Но если вам не нравится ситуацию, я не рекомендую вам использовать этот API.

< URL формата >

https://spreadsheets.google.com/feeds/cells/[ Ваш ключ таблицы ]/od6/public/values?min-row=[ начать номер строки ]&max-row=[ конец номер строки ]&min-col=[ начать номер столбца ]&max-col=[ конец номер столбца ]&alt=json-in-script&callback=[ обратного вызова имя функции ]

< Как его использовать? >
Формат JSONP проста в использовании в JavaScript. Никто не нужно парсер. Но я хочу использовать генератор URL, чтобы сделать API более полезным. Поэтому я разработал сценарий, который преобразует из параметров пейджинговой параметрам URL следующий синтаксис Google.

< jQuery плагин >
Я разработал этот плагин jQuery именем « generateGoogleJsonpUri ».
generateGoogleJsonpUri – github
Я создал образец страницу как рамках блога, чтобы проверить мои плагин.
https://mecrazy.net/sample/generateGoogleJsonpUri/
Если вы хотите, скопируйте его источник в качестве примера.

< использование – литье >
Кастинг синтаксис

var test = $.genJsonpGDU("<Ваш-таблицы-ключ-здесь>");

или

var test = $.genJsonpGDU({key:"<Ваш-таблицы-ключ-здесь>"});

.

Вы можете найти ключ в URL части таблицы. Это мой образец ниже.
spreadsheet_sample_001
На этой картине, URL является « https://docs.google.com/spreadsheets/d/1IG2QEOXehU01b6DoMQi19CvFpm2EZJOUM2y4lqXKduw/edit#gid=0 ». Ключ для моей таблицы является « 1IG2QEOXehU01b6DoMQi19CvFpm2EZJOUM2y4lqXKduw ». Пожалуйста, проверьте адрес вашего таблицу, чтобы получить ключ.

< использование – настроить пейджер >

test.pager({
  startRow:2,//Номер строки, чтобы начать получать (требуется)
  minCol:2,//Номер столбца, чтобы начать получать (требуется)
  maxCol:7,//Номер столбца в конец становится (требуется)
  recsPerPage:5//Записи в страницу (необязательный)
});

Пожалуйста, сравните выше синтаксис и таблицу ниже. При см. таблицу ниже, пожалуйста, представьте Excel или любой вид электронной таблицы. Синтаксис выше означает диапазон первой страницы является розовая гамма, 2-я стр. зеленый диапазон. « B2:G2 » является первая запись. « B6:G6 » и пятая запись.

A1 B1 C1 D1 E1 F1 G1 H1
A2 B2 C2 D2 E2 F2 G2 H2
A3 B3 C3 D3 E3 F3 G3 H3
A4 B4 C4 D4 E4 F4 G4 H4
A5 B5 C5 D5 E5 F5 G5 H5
A6 B6 C6 D6 E6 F6 G6 H6
A7 B7 C7 D7 E7 F7 G7 H7
A8 B8 C8 D8 E8 F8 G8 H8
A9 B9 C9 D9 E9 F9 G9 H9
A10 B10 C10 D10 E10 F10 G10 H10
A11 B11 C11 D11 E11 F11 G11 H11
A12 B12 C12 D12 E12 F12 G12 H12
A13 B13 C13 D13 E13 F13 G13 H13

< использование – получить адрес страницы >
Это пример, чтобы получить первой страницы URL.

var pageUrl = test.page(1);

( “test.pager(объект)” необходимо до выполнения этой функции. )

< использование – выполнить Ajax >
Аргументы в пользу « test.ajax » такие же, как « http://api.jquery.com/jQuery.ajax/ ».

test.ajax({
  url:test.page(1),
  success:function(json){
    console.log(json);
  }
});

Если вы хотите знать текущую страницу имеет предыдущую страницу или следующую страницу, пожалуйста, используйте « test.get() » в функции success и параметров проверки.

test.ajax({
  url:test.page(1),
  success:function(json){
    console.log(json);
    var param = test.get();
    if(param.pager.prev){
      console.log('Текущая страница имеет предыдущую страницу.');
    }else{
      console.log('Текущая страница не имеет предыдущую страницу.');
    }
    if(param.pager.next){
      console.log('Текущая страница имеет следующую страницу.');
    }else{
      console.log('Текущая страница не имеет следующую страницу.');
    }
  }
});

< использование – преобразовать JSON в 2D массива >
« test.jsonToArr » преобразует из формата JSON компании Google в 2D массива.

test.ajax({
  url:test.page(1),
  success:function(json){
    var arr2d = test.jsonToArr(json);
    console.log(arr2d);
  }
});

< использование – переменная кэш >
Если вы хотите включить кэш подкачки с помощью переменных JavaScript, пожалуйста, следуйте приведенным ниже синтаксис.

test.set({cache:true});

Этот аргумент переключается использовать кэш для подкачки. Он проверяет дату обновления на JSONP каждые 20 минут по умолчанию. Если дата изменилась, она автоматически очистить кэш. Если вы хотите изменить интервал провести проверку сроков. Вы можете использовать синтаксис, как показано ниже, а не выше синтаксиса.

test.set({
  cache:true,
  cacheInterval:{
    sec:0,min:50,hour:0
  }
});

< послесловие >
Есть основные различия между новыми и старыми таблицами Google.

  новый старый
Максимальные клетки 2000000 клетки 400000 клетки
Максимальные колонны неограниченный 256 столбцов на листе

Я думаю, что новая версия невероятно большой и бесплатная база данных. Я хочу, чтобы найти интересные обычаи новых таблиц Google.

Упрощенная HTML-генератор для Bootstrap 3

< Что это? >
Он генерирует основной источник HTML для Bootstrap 3. Вы можете выбрать варианты, когда вы его генерации. Я часто использую это для себя. Если вы хотите, пожалуйста, закладки эту страницу.


< генератор >
Название страницы :
таблица условных сигналов :
Bootstrap версия :
Совместимость со старыми IE :
Используйте фиксированный панель навигации :
Используйте липкую колонтитул :
Используйте jQuery переключение :
Используйте jQuery UI переключение :
Используйте backbone.js :
Используйте underscore.js :
Используйте bootbox :

Если вы выбираете “Совместимо с старой IE” “ДА”, нужно поставить “bootstrap.min.css” и “respond.min.js” на вашем сервере. В основном “respond.min.js” не корректно работать на CDN и серверов других.

< Сценарии >
Вы можете скачать скрипты, используемые HTML. Вы можете поставить на свой сервер и заменить пути сценариев.
Bootstrap
jQuery
jQuery UI
backbone.js
underscore.js
bootbox
html5shiv
Respond.js
( Bootstrap и Respond.js необходимы для загрузки для старого IE. Пожалуйста, будьте осторожны. )

Сделать STINGER3 (WordPress тема) совместим с WPML (многоязычный плагин)

< Что WPML? >
Это многоязычная плагин для WordPress. Я использую WPML на этом mecrazy блоге.
Официальный сайт WPML

< Что STINGER3? >
Это тема для WordPress. Она имеет много хороших функций без плагина. Например, фрагмент вставки для объявлений (как Google Adsense) и отличным дизайном социальных кнопок. Я хотел, чтобы попытаться использовать эту тему.
Официальный сайт STINGER3 (Японский страницы)

< Надеюсь, нежный деятельность >
Разработчик STINGER3 слишком занят, чтобы ответить на Twitter, и я не уверен, что он может читать, кроме японского языков. Если у вас есть какие-либо вопросы о STINGER3, я надеюсь, что вы, чтобы найти ответ на Google или решить проблемы самостоятельно.

< Для людей, которые не умеют читать по-японски >
Официальный сайт STINGER3 является на японском языке. Я думаю, что это трудно найти ссылку на скачивание тематического архива. Вы должны найти японское слово «ダウンロード». Это означает, «скачать» на русском языке. Пожалуйста, используйте CTRL + F найти это слово. Пожалуйста, найдите имя текущей версии файла «stinger3ver20140327.zip».

< Код для совместимости >
Приведенный ниже код обеспечивать совместимость WPML чтобы STINGER3.

<style type="text/css">

.submenu-languages{
  background-color:#f3f3f3;
  border-style:solid;
  border-color:#dedede;
  border-width:0px 1px 1px 1px;
  position:absolute;
  margin-left:-11px;
  margin-top:21px;
  padding-bottom:5px;
  display:none;
}
.submenu-languages > li{
  white-space:nowrap !important;
  float:none !important;
  display:inline-block !important;
}

.iclflag{ vertical-align:middle;position:relative !important;top:-1px !important; }
#lang_sel{ z-index:1000; }
#lang_sel a{ display:block; }
#lang_sel ul,#lang_sel li,#lang_sel a{
  margin:0px;padding:0px;
  width:300px;
  text-align:left;
  white-space:nowrap;
}
#lang_sel ul,#lang_sel li{ margin:0px !important;padding:0px !important; }
#lang_sel a{ margin:0px !important;padding:0px 7px !important; }
#lang_sel li,#lang_sel a,#lang_sel span{
  height:30px !important;
  line-height:30px !important;
  font-size:14px;
}
#lang_sel > ul > li > ul{ top:31px; }

</style>
<script type="text/javascript">
jQuery(function($){
var langMenuObj = $('.submenu-languages').eq(0);
var wpmlMobile = (typeof(window.orientation) != "undefined");
$('.menu-item-language-current').eq(0).on('mouseenter',function(){
if(!wpmlMobile){langMenuObj.stop(true,true).fadeIn('fast');}
}).on('mouseleave',function(){
if(!wpmlMobile){langMenuObj.stop(true,true).fadeOut('slow');}
}).on('click',function(){
langMenuObj.stop(true,true).toggle();
});
$('.icl_lang_sel_current ').parent().click(function(){ return false; });
});
</script>

< Как вставить этот код? >
Есть 3 примеры способов вставки кода. Пожалуйста, выберите один из них. Или, если вы знаете, как настроить WordPress, вы можете вставить вручную ваши скрипты.

< метод – 1 >
К [ Внешний вид – Виджеты ] меню администратора. Пожалуйста, добавьте «Текст» одному действительного области. Пожалуйста, не вводите название, положить сценарий только в виде подробно.

< метод – 2 >
Я разработал плагин STINGER3 loves WPML. Этот плагин сделать то же самое, что и «метод – 1». Если вы нашли ошибку, пожалуйста, сообщите или сказать мне на Github, Twitter или Google+.

< метод – 3 >
Использование WordPress плагин «Wp Insert». Он может вставить HTML код в любое место на вашем блоге.

< позже >
Я думаю, что каждый методы не так уж и сложно. Но текущая версия STINGER3 не совместим с языком mo файлов. Мы можем перевести только с струнного Перевод WPML. Если у меня есть свободное время, я хочу, чтобы разработать патч для STINGER3 совместим с mo файлов.

< Обновление от 11 июня 2014 >
фиксированный – Это не может справиться с первым водопроводную событие Android или IOS браузеров. Исходный код на этой странице и плагин WordPress на Github обновляются.

Создание динамических веб-страниц только с Google Drive

< Предупреждение >
Я рекомендую вам, чтобы получить дополнительную учетную запись Google только для общественности. Потому что, если вы последуете моему процедуру, ваш адрес Gmail будет на общественном XML файла.

< Новое решение на 2014/07/09 >
Я написал пост Получить новую версию Google Таблицы как JSONP. Если вы хотите использовать новую версию Google Таблицы для создания динамических веб-страниц вместо старой версии, пожалуйста, прочтите этот пост.

< Обновлено 2014/04/26 >
Пожалуйста, используйте Anyfile Notepad или любой другой текстовый редактор приложения для Google Drive на Google Web Store вместо Drive Notepad. Потому Drive Notepad был удален из магазина.

< Обновлено 2014/05/12 >
Эй! Drive Notepad вернулся к Web Store Google!

< Рекомендации >
Я рекомендую вам установить “Drive Notepad”. Это расширение для Google Drive. При установке диска Notepad, необходимо Chrome. Но после подключения Drive Notepad в Google Drive, Chrome не требуется. Вы можете использовать Drive Блокнот на любых браузерах.
https://chrome.google.com/webstore/detail/drive-notepad/gpgjomejfimnbmobcocilppikhncegaj?hl=en-GB
drive_notepad_en_us

< Для обновления содержимого из Таблица >
Вы должны использовать “Google Таблица версии 1”. Потому что “версия 2” не поддерживает CSV и обмена XML еще. (Я написал этот пост в 19 апреля 2014.) Если вы обычно генерировать новые Таблица сегодня, он автоматически будет версия 2.

Google объяснил новый Таблица на “Новые Google Таблицы“.

Я беспокоился о CSV и обмен XML не будет поддерживать в версии 2. Поэтому я проверил также “Поддержка функций в новых Google Таблицах“. Но эта функция отсутствует в списке на этой странице. Да … нет в списке … но никто не уверен, когда Google изменить свое мнение ….
Можете ли вы согласиться с этой ситуацией? LOL

Давайте https://g.co/oldsheets доступ к генерировать Таблицах в версии 1.

Это мой образец.

Это только один лист. Он заголовок, 3 перевалы и 2 ряда.
( Я собираюсь генерировать imgur сайт изображения. )

< Давайте сделаем это публично >
Следуйте приведенным ниже рис.
publish_to_the_web_ru

Выберите “Опубликовать в Интернете” и нажмите кнопку “Начать публикацию”.
См. раздел “Ссылка на опубликованные данные”.
publish_to_the_web_2_ru
Вы можете получить свой Таблицах как веб-страницы, HTML, CSV, TXT, PDF, ATOM, RSS, XLS и ОРВ. Если вы хотите синхронизировать Таблицах на ваш сайт, вы должны выбрать CSV, атом или RSS. Они просты формат для синхронизации. При выборе одного из них, вы можете найти функцию, чтобы выбрать колонку и строку. Эта функция может сделать размер файла согласно запросу меньше.

Если вы выбираете CSV, прежде чем выбрать диапазон, пожалуйста, выберите целевой лист. Образец, как показано ниже рис.
select_sheet_ru
В моем примере, “А1” является заголовок. Я хочу получить 5 строк максимум. Так что я задать диапазон “A2:A6”.
select_cell_ru
Вы можете найти “range=A2%3AA6” в URL. Если вы хотите добавить функцию подкачки на ваш сайт, вы должны динамически изменять параметр для “range” по Javascript.

< Это сложно? >
Не волнуйтесь. Я написал код Javascript здесь.
https://github.com/mecrazy/generateGoogleDriveUri
Этот сценарий совместим с CSV, ATOM и RSS форматов. Это только генератор URI. Он не имеет анализатор. Если вы выбираете атом или RSS, вы можете использовать jQuery как анализатор.

Пожалуйста, используйте “generateGoogleDriveUri.min.js”, как показано ниже.

<!DOCTYPE html>
<html>
<head>
<title>Образец страницы</title>
<script src="js/generateGoogleDriveUri.min.js"></script>
<script type="text/javascript">
window.onload = function(){

//Кастинг объект
var gduObj = new genGDU('Поставьте ссылку на опубликованных данных здесь');

//Создать URI
var atomUri = gduObj.genUri(
  'atom', // Я выбираю формат ATOM.
  {
    startRow:2, //Начните с строке 2
    startCol:1, //Начните с Колонка 1
    cols:1, //Вырезать 1 столбцов
    rows:5, //Отрежьте 5 строк на странице
    page:1 //Получить стр. 1
  }
);

var html = '<a href="' + atomUri + '" target="_blank">' + atomUri + '</a>';
document.getElementById('sample').innerHTML = html;

}
</script>
</head>
<body id="sample"></body>
</html>

< Добавить index.html и установка Drive Notepad >
После добавления Drive Notepad на Chrome, вы можете найти “Text Document” на создание меню вашего Google Drive.
add_index_ru
Если это ваш первый раз использовать Drive Notepad, вам будет предложено, как показано ниже.
permission_01_en_us
Нажмите “Login and/or grant app permissions…” и принять вопрос ниже.
permission_02_ru

Пожалуйста, измените имя файла “index.html”. После сохранения файла, закрыть вкладку.
change_file_name_en_us

Пожалуйста, измените настройки о “Управление приложениями”.
manage_apps_ru
Пожалуйста, проверьте “Использовать по умолчанию” из Drive Notepad подряд.
use_by_default_ru
После этого, вы можете использовать Drive Notepad как и другие приложения на Google Drive.

< Изменение настройки общего доступа >
Выберите папку для установки общественности.
После этого, следуйте приведенным ниже рис.
set_sharing_enabled_01_ru
Установите “всем в Интернете” проверили.
set_sharing_enabled_02_ru

< Подготовка HTML, CSS, Javascript >
Используйте Drive Notepad, чтобы подготовить их.
Или редактировать с вашим собственным текстовом редакторе и загружать их.
Мой относительное положение как ниже.
my_public_tree_ru

Ссылку ниже мой веб-страницы, созданные с Google Таблицах.
https://googledrive.com/host/0B2hsIY7iHEnLS290OHlmRkFmbU0/
Если вы хотите, пожалуйста, используйте источники как образец.

< Очень сценарий >
Я разработал imgur URL конвертер для моей веб-странице. Если вы хотите, пожалуйста, используйте этот.
https://github.com/mecrazy/imgurUrlConverter