Arquivo da Categoria: HTML

HTML

Eu construí PhantomJS 2.1.1 para Raspberry Pi

Eu construí PhantomJS 2.1.1 para Raspberry Pi. Ele também pode ser executado em qualquer máquina arquitetura armhf.

Eu usei o Debian em ARM VPS em https://www.scaleway.com/ e siga esta página para construí-lo.

Faça o download de https://github.com/mecrazy/phantomjs-binaries.
( Depois da minha solicitação de recebimento permitido, vou editar o link neste blog para “https://github.com/avaynshtok/phantomjs-binaries”. )

Eu uso o Raspberry Pi como uma máquina de teste para todos os aplicativos de servidor, como raspagem web. Mas não havia binários PhantomJS para a arquitetura armhf na web. Então eu construí-lo. Por favor, use este binário, se quiser. Mas eu não posso cuidar eventuais problemas e erros quando você usá-lo.

< O que é "PhantomJS"? >
PhantomJS é uma ferramenta de raspagem web com JavaScript API. Ele pode capturar páginas da web como PDF, PNG ou algum tipo de arquivo de imagem. Se você quiser saber mais sobre PhantomJS, verifique http://phantomjs.org/.

Obter nova versão do Editor de planilhas do Google como JSONP

< aviso >
Eu recomendo que você comece conta adicional do Google apenas para o público.
Porque, se você seguir o meu procedimento, seu endereço do Gmail será arquivado JSONP público.

< Editor de planilhas do Google >
Versão antiga do Editor de planilhas do Google pode compartilhar planilhas como XML, JSON e algum tipo de formato. Pensei nova versão não tem as funções de compartilhamento. Mas eu encontrei a solução boa para nova versão do Editor de planilhas do Google na resposta para a pergunta sobre StackOverflow.
Unable to publish specific cells in new Google Spreadsheets – StackOverflow ( em Inglês )
De acordo com a página acima, esta API é uma espécie de API de idade. Ninguém sabe ao certo quando ela pára. Eu não me importo esta situação. Mas se você não gosta da situação, eu não recomendo que você use este API.

< formato URL >

https://spreadsheets.google.com/feeds/cells/[ Sua chave de planilha ]/od6/public/values?min-row=[ iniciar número da linha ]&max-row=[ número da linha final ]&min-col=[ iniciar número da coluna ]&max-col=[ número da coluna final ]&alt=json-in-script&callback=[ nome da função callback ]

< Como usá-lo? >
Formato JSONP é fácil de usar em JavaScript. Ninguém precisa parser. Mas eu quero usar gerador de URL para fazer a API mais útil. Então, eu desenvolvi um script que converte a partir de parâmetros de paginação para parâmetros de URL seguinte sintaxe do Google.

< plugin jQuery >
Eu desenvolvi este plugin jQuery chamado “generateGoogleJsonpUri”.
generateGoogleJsonpUri – github
Eu criei a página de amostra como um quadro blog para testar o meu plugin.
https://mecrazy.net/sample/generateGoogleJsonpUri/
Se você quiser, copie sua fonte como um exemplo.

< uso – moldagem >
Fundição sintaxe é

var test = $.genJsonpGDU("<Seu-planilha-key-aqui>");

ou

var test = $.genJsonpGDU({key:"<Seu-planilha-key-aqui>"});

.

Você pode encontrar uma chave na URL da sua planilha. Ele é o meu exemplo abaixo.
spreadsheet_sample_001
Nesta imagem, o URL é “https://docs.google.com/spreadsheets/d/1IG2QEOXehU01b6DoMQi19CvFpm2EZJOUM2y4lqXKduw/edit#gid=0”. A chave para a minha planilha é “1IG2QEOXehU01b6DoMQi19CvFpm2EZJOUM2y4lqXKduw”. Por favor verifique a URL da sua planilha para obter a sua chave.

< uso – configurar pager >

test.pager({
  startRow:2,//Número da linha para começar a receber (necessário)
  minCol:2,//Número da coluna para começar a receber (necessário)
  maxCol:7,//Número da coluna para acabar recebendo (necessário)
  recsPerPage:5//Registros em uma página (opcional)
});

Por favor comparar a sintaxe acima e a tabela abaixo. Quando você ver a tabela abaixo, por favor, imagine Excel ou qualquer tipo de planilha. Sintaxe acima, a gama da primeira página é faixa rosa, segunda página é faixa verde. “B2:G2” é um primeiro registro. “B6:G6” é o quinto álbum.

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

< uso – obter URL da página >
É um exemplo para chegar primeiro URL da página.

var pageUrl = test.page(1);

( “test.pager(objeto)” é necessária antes de executar esta função. )

< uso – executar Ajax >
Argumentos para “test.ajax” são os mesmos que “http://api.jquery.com/jQuery.ajax/“.

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

Se você quer saber a página atual tem página anterior ou próxima página, por favor use “test.get()” na função success e os parâmetros de seleção.

test.ajax({
  url:test.page(1),
  success:function(json){
    console.log(json);
    var param = test.get();
    if(param.pager.prev){
      console.log('Página corrente tem página anterior.');
    }else{
      console.log('Página corrente não tem página anterior.');
    }
    if(param.pager.next){
      console.log('Página corrente tem página seguinte.');
    }else{
      console.log('Página corrente não tem página seguinte.');
    }
  }
});

< uso – converter JSON a matriz 2D >
“test.jsonToArr” convertidos do formato do Google JSON a matriz 2D.

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

< uso – cache de variável >
Se você quiser ativar o cache de paginação utilizando variáveis ​​JavaScript, siga a sintaxe abaixo.

test.set({cache:true});

Este argumento muda para usar o cache para paginação. Ele verifica atualização em JSONP a cada 20 minutos por padrão. Se a data alterada, cache automaticamente clara. Se você quiser alterar o intervalo para verificar a data. Você pode usar a sintaxe como a seguir em vez da sintaxe acima.

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

< Posfácio >
Existem diferenças básicas entre novos e antigos do Google Spreadsheets.

  novo velho
Máximo de células 2 milhões de células 400,000 células
Máximo de colunas ilimitado 256 colunas por folha

Eu acho que a nova versão do banco de dados é incrivelmente grande e livre. Eu quero encontrar usos interessantes do novo Editor de planilhas do Google.

Gerador de HTML básico para Bootstrap 3 ( em Português )

< O que é isso? >
Gera HTML básico para Bootstrap 3. Você pode escolher opções quando gerá-lo. Costumo usar isso para mim mesmo. Se você quiser, marque esta página.


< Gerador >
Título da página :
Código do idioma :
versão Bootstrap :
Compatível com o velho IE :
Use a barra de navegação fixa :
Use rodapé pegajoso :
Use failover jQuery :
Use jQuery UI failover :
Use backbone.js :
Use underscore.js :
Use bootbox :

Se você escolher “Compatível com o velho IE” “SIM”, você precisa colocar “bootstrap.min.css” e “respond.min.js” em seu servidor. Basicamente “respond.min.js” não funciona corretamente em CDN e servidores de outros.

< Scripts >
Você pode baixar os scripts que usa HTML. Você pode colocar em seu servidor e substituir caminhos de scripts.
Bootstrap
jQuery
jQuery UI
backbone.js
underscore.js
bootbox
html5shiv
Respond.js
( Bootstrap e Respond.js são necessárias para baixar para o velho IE. Por favor, tenha cuidado. )

Faça STINGER3 (tema WordPress) compatível com WPML (Multilanguage plugin)

< O que há de WPML? >
É um plugin para WordPress multilingue. Eu uso WPML neste blog mecrazy.
Site oficial do WPML

< O que há de STINGER3? >
Este é um tema para WordPress. Tem muitas funções agradáveis ​​sem plugin. Por exemplo, trecho de inserção de anúncios (como o Google Adsense) e projeto fresco botões sociais. Eu queria tentar usar este tema.
Site oficial do STINGER3 (página japonês)

< Espero atividade suave >
O desenvolvedor STINGER3 está muito ocupado para responder no Twitter, e eu não tenho certeza que ele pode ler diferentes japonês idiomas. Se você tem alguma dúvida sobre STINGER3, eu espero que você encontre a resposta no Google ou resolver os problemas por si mesmo.

< Para as pessoas que não sabem ler japonês >
Site oficial do STINGER3 é em japonês. Eu acho que é difícil de encontrar link para download do arquivo zip tema. Você deve encontrar a palavra japonesa “ダウンロード“. Significa “Download” em Português. Utilize CTRL + F para encontrar esta palavra. Por favor, encontrar o atual nome do arquivo versão “stinger3ver20140327.zip”.

< Código para compatibilidade >
O código a seguir dar compatibilidade WPML para 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>

< Como inserir esse código? >
Existem 3 maneiras de exemplo para inserir o código. Por favor escolha uma delas. Ou se você sabe como personalizar o WordPress, você pode inserir manualmente para seus scripts PHP.

< Método – 1 >
Ir para [ Apresentação – Widgets ] de menu de administrador. Por favor, adicione “Texto” para uma área válida. Por favor, não insira o título, colocar o script apenas no detalhe do formulário.

< Método – 2 >
Eu desenvolvi um STINGER3 loves WPML plugin. Este plugin faz a mesma coisa como “Método – 1”. Se você encontrar erros, por favor informe ou me dizer sobre Github, Twitter ou Google+.

< Método – 3 >
Usando WordPress Plugin “Wp Insert“. Pode inserir o código HTML para qualquer lugar em seu blog.

< Depois >
Eu acho que cada métodos não são tão difíceis. Mas a versão atual do STINGER3 não é compatível com arquivos mo linguagem. Nós só podemos traduzir com cordas Tradução de WPML. Se eu tiver tempo livre, eu quero desenvolver patch para STINGER3 compatível com arquivos mo.

< Atualizado em 11 de junho de 2014 >
Fixo – Ele não consegue lidar com o primeiro evento da torneira de Android ou iOS navegadores. O código fonte desta página eo plugin WordPress no Github são atualizados.

Gerando páginas web dinâmicas apenas com Google Drive

< Aviso >
Eu recomendo que você comece conta adicional do Google apenas para o público. Porque, se você seguir o meu procedimento, seu endereço do Gmail será no arquivo XML público.

< Nova solução on 2014/07/09 >

Eu escrevi o post Obter nova versão do Editor de planilhas do Google como JSONP. Se você quiser usar a nova versão do Editor de planilhas do Google para gerar páginas web dinâmicas, em vez de a versão antiga, por favor leia esse post.

< Atualizado em 2014/04/26 >
Utilize Anyfile Notepad ou quaisquer outros aplicativos de edição de texto para o Google Drive no Google Web Store em vez de Drive Notepad. Porque Drive Notepad foi retirado da loja.

< Atualizado em 2014/05/12 >
Hey! Drive Notepad está de volta ao Google Web Store!

< Recomendação >
Eu recomendo que você instale “Drive Notepad”. É uma extensão para o Google Drive. Quando você instala Drive Notepad, você precisa Chrome. Mas depois de conectar Drive Notepad ao Google Drive, Chrome não é necessária. Você pode usar Drive Notepad em qualquer navegador.
https://chrome.google.com/webstore/detail/drive-notepad/gpgjomejfimnbmobcocilppikhncegaj?hl=en-GB
drive_notepad_en_us

< Para atualizar o conteúdo da Planilha >
Você precisa usar o “Google Folha de Cálculo versão 1”. Porque “versão 2” não suporta CSV e partilha XML ainda. (Eu escrevi este post em abril 19, 2014.) Se você costuma gerar novos Folha de Cálculo hoje, está automaticamente a versão 2.

Google explicou novo Folha de Cálculo em “Confira o novo Editor de planilhas do Google“.

Eu me preocupava com CSV e partilha XML não vai apoiar na versão 2. Então eu também verificado “Recursos não compatíveis com o novo Planilhas Google“. Mas esta função não está listado na página. Sim … não listados … mas ninguém tem certeza quando o Google mudar de idéia ….
Você pode concordar esta situação? LOL

Vamos acesso https://g.co/oldsheets para gerar uma Folha de Cálculo na versão 1.

É a minha amostra.

É apenas uma folha. Tem cabeçalho, 3 cols e 2 linhas.
( Vou gerar imgur imagem web site. )

< Vamos torná-lo público >
Siga a foto abaixo.
publish_to_the_web_pt-pt

Selecione “Publicar na web” e empurre “Começar a publicar”.
Consulte a seção “Obter um link para os dados publicados”.
publish_to_the_web_2_pt-pt
Você pode obter o seu Folha de Cálculo como página da Web, HTML, CSV, TXT, PDF, ATOM, RSS, XLS e ODS. Se você deseja sincronizar Folha de Cálculo para o seu site, você deve escolher CSV, ATOM ou RSS. Estes são formato fácil para sincronização. Quando você escolhe um deles, você pode encontrar a função para selecionar coluna e linha. Esta função pode fazer o tamanho do arquivo por pedido menor.

Se você escolher CSV, antes de selecionar gama, por favor, selecione uma folha de destino. Amostra é como a foto abaixo.
select_sheet_pt-pt
No meu exemplo, “A1” é cabeçalho. Eu quero ficar 5 linhas máximo. Então eu definir o intervalo de “A2:A6”.
select_cell_pt-pt
Você pode encontrar “range=A2%3AA6” na url. Se você quiser adicionar a função de paginação para o seu site, você deve alterar dinamicamente o parâmetro para “range” por Javascript.

< É difícil? >
Não se preocupe. Eu escrevi o código Javascript aqui.
https://github.com/mecrazy/generateGoogleDriveUri
Este script é compatível com o CSV, Atom e RSS formatos. É só gerador URI. Ele não tem parser. Se você escolher ATOM ou RSS, você pode usar jQuery como um parser.

Por favor use “generateGoogleDriveUri.min.js” como abaixo.

<!DOCTYPE html>
<html>
<head>
<title>Página Amostra</title>
<script src="js/generateGoogleDriveUri.min.js"></script>
<script type="text/javascript">
window.onload = function(){

//Fundição objeto
var gduObj = new genGDU('Put a link to the published data here');

//Gerar URI
var atomUri = gduObj.genUri(
  'atom', // I escolher o formato ATOM.
  {
    startRow:2, //Comece da linha 2
    startCol:1, //Iniciar a partir de 1 col
    cols:1, //Corte uma colunas
    rows:5, //Corte 5 Filas por página
    page:1 //Obter página 1
  }
);

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

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

< Adicionar index.html e definição Drive Notepad >
Depois de adicionar Drive Notepad no Chrome, você pode encontrar “Text Document” na menu do Google Drive criar.
add_index_pt-pt
Se é a primeira vez que usar Drive Notepad, você será solicitado como abaixo.
permission_01_en_us
Empurre “Login and/or grant app permissions…” e aceitar a pergunta abaixo.
permission_02_pt-pt

Por favor, altere o nome do arquivo para “index.html”. Após salvar o arquivo, feche a aba.
change_file_name_en_us

Por favor, altere a definição sobre “Gerir aplicações”.
manage_apps_pt-pt
Por favor, marque a opção “Use por padrão” de unidade Notepad linha.
use_by_default_pt-pt
Depois disso, você pode usar Drive Notepad como os outros aplicativos no Google Drive.

< Alterar as configurações de compartilhamento >
Selecione a pasta para definir pública.
Depois disso, siga a foto abaixo.
set_sharing_enabled_01_pt-pt
Defina “Público na internet” marcada.
set_sharing_enabled_02_pt-pt

< Preparando HTML, CSS, Javascript >
Use Drive Notepad para prepará-los.
Ou editar com seu próprio editor de texto e enviá-los.
Minha posição relativa é como abaixo.
my_public_tree_pt-pt

O link abaixo é a minha página web criado com Google Folha de Cálculo.
https://googledrive.com/host/0B2hsIY7iHEnLS290OHlmRkFmbU0/
Se você quiser, por favor, use fontes como amostra.

< Roteiro extra >
Eu desenvolvi imgur conversor URL para minha página web. Se você quiser, por favor, use este.
https://github.com/mecrazy/imgurUrlConverter