Archivo de la categoría: HTML

HTML

Construí PhantomJS 2.1.1 para Raspberry Pi

Construí PhantomJS 2.1.1 para Raspberry Pi. También se puede ejecutar en cualquier máquina de arquitectura armhf.

Solía Debian en ARM VPS en https://www.scaleway.com/ y sigo a esta página para construirlo.

Por favor, descarga de https://github.com/mecrazy/phantomjs-binaries.
( Después de mi solicitud de tracción permite, voy a editar el enlace en este blog a “https://github.com/avaynshtok/phantomjs-binaries”. )

Yo uso Raspberry Pi como una máquina de ensayo de las aplicaciones de servidor como raspado web. Pero no había binarios para la arquitectura PhantomJS armhf en la web. Así que construí. Por favor, use este binario, si lo desea. Pero no puedo cuidar los problemas y errores cuando lo utiliza.

< ¿Qué es "PhantomJS"? >
PhantomJS es una herramienta de raspado web con API de JavaScript. Puede capturar páginas web como PDF, PNG o algún tipo de archivo de imagen. Si desea saber más acerca de PhantomJS, por favor verifica http://phantomjs.org/.

Obtenga nueva versión de Google Spreadsheets como JSONP

< advertencia >
Te recomiendo que para obtener la cuenta adicional Google sólo para público.
Porque si sigues mi procedimiento, su dirección de Gmail será archivada JSONP público.

< Google Spreadsheets >
Versión antigua de Google Spreadsheets puede compartir hojas de cálculo como XML, JSON y algún tipo de formato. Pensé nueva versión no tiene esa función de uso compartido. Pero me di cuenta de la buena solución para la nueva versión de Google Spreadsheets en la respuesta a la pregunta sobre StackOverflow.
Unable to publish specific cells in new Google Spreadsheets – StackOverflow ( en Inglés )
De acuerdo a la página anterior, esta API es un poco viejo API. Nadie está seguro de cuando se detiene. No me importa la situación. Pero si no te gusta la situación, yo no recomiendo usar esta API.

< formato URL >

https://spreadsheets.google.com/feeds/cells/[ La clave de la hoja de cálculo ]/od6/public/values?min-row=[ empezar número de fila ]&max-row=[ número de fila final ]&min-col=[ empezar número de columna ]&max-col=[ número de columna final ]&alt=json-in-script&callback=[ nombre de la función de devolución de llamada ]

< ¿Cómo se usa? >
Formato JSONP es fácil de usar en JavaScript. Nadie necesita analizador. Pero quiero usar generador de URL para que la API más útil. Así que desarrollé una secuencia de comandos que convierte de parámetros de paginación para los parámetros de URL siguiente sintaxis Google.

< plugin de jQuery >
Desarrollé este plugin jQuery llamado “generateGoogleJsonpUri”.
generateGoogleJsonpUri – github
He creado la página muestra como un marco blog para probar mi plugin.
https://mecrazy.net/sample/generateGoogleJsonpUri/
Si quieres, por favor, copie su fuente como una muestra.

< uso – fundición >
Fundición sintaxis es

var test = $.genJsonpGDU("<Your-spreadsheet-key-here>");

o

var test = $.genJsonpGDU({key:"<Your-spreadsheet-key-here>"});

.

Usted puede encontrar una clave en la URL de la hoja de cálculo. Es para mí un ejemplo a continuación.
spreadsheet_sample_001
En esta imagen, la URL es “https://docs.google.com/spreadsheets/d/1IG2QEOXehU01b6DoMQi19CvFpm2EZJOUM2y4lqXKduw/edit#gid=0”. La clave para mi hoja de cálculo es “1IG2QEOXehU01b6DoMQi19CvFpm2EZJOUM2y4lqXKduw”. Por favor verifique la dirección URL de la hoja de cálculo para obtener su clave.

< uso – configurar pager >

test.pager({
  startRow:2,//El número de fila para empezar a recibir (necesario)
  minCol:2,//Número de columna para empezar a recibir (necesario)
  maxCol:7,//Número de columna para poner fin a conseguir (necesario)
  recsPerPage:5//Los registros en una página (opcional)
});

Por favor compare la sintaxis anterior y la tabla siguiente. Cuando vea la tabla de abajo, por favor imaginar Excel o cualquier tipo de hoja de cálculo. Sintaxis de arriba significa que el rango de la primera página es la gama de color rosa, segunda página es zona verde. “B2: G2” es un primer registro. “B6: G6” es un quinto disco.

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 – obtener la página URL >
Es un ejemplo para tener primera página URL.

var pageUrl = test.page(1);

( “test.pager(objeto)” se requiere antes de ejecutar esta función. )

< uso – ejecutar Ajax >
Argumentos para “test.ajax” son los mismos que “http://api.jquery.com/jQuery.ajax/“.

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

Si quieres saber la página actual tiene la página anterior o siguiente página, por favor, utilice “test.get()” en la función “success” y compruebe los parámetros.

test.ajax({
  url:test.page(1),
  success:function(json){
    console.log(json);
    var param = test.get();
    if(param.pager.prev){
      console.log('La página actual tiene la página anterior.');
    }else{
      console.log('Página actual no tiene la página anterior.');
    }
    if(param.pager.next){
      console.log('La página actual tiene página siguiente.');
    }else{
      console.log('Página actual no tiene la página siguiente.');
    }
  }
});

< uso – convertir JSON a array 2D >
“test.jsonToArr” se convierte de formato JSON de Google de array 2D.

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

< uso – caché de variables >
Si desea habilitar la caché de paginación utilizando variables de JavaScript, por favor siga el siguiente sintaxis.

test.set({cache:true});

Este argumento pasa a utilizar la caché para paginación. Verifica la fecha de actualización en JSONP cada 20 minutos de forma predeterminada. Si la fecha cambia, automáticamente claro caché. Si desea cambiar el intervalo para comprobar la fecha. Usted puede utilizar la sintaxis como la siguiente en lugar de la sintaxis anterior.

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

< Epílogo >
Existen diferencias básicas entre los nuevos y viejos Hojas de cálculo de Google.

  nuevo viejo
células Máximo 2 millones de células 400,000 células
Número máximo de columnas ilimitado 256 columnas por hoja

Creo que la nueva versión de la base de datos es increíblemente grande y libre. Quiero encontrar usos interesantes de las nuevas hojas de cálculo de Google.

Generador de HTML básico para Bootstrap 3 ( en español )

< ¿Qué es esto? >
Genera código fuente HTML básico para Bootstrap 3. Usted puede elegir opciones cuando lo haya generado. A menudo utilizo con mis propios ojos. Si lo desea, por favor, marcador esta página.


< Generador >
Título de la página :
Código de idioma :
versión Bootstrap :
Compatible con el viejo IE :
Utilice la barra de navegación fija :
Utilice pegajosa pie de página :
Usar jQuery conmutación por error :
Usar jQuery UI conmutación por error :
Utilice backbone.js :
Utilice underscore.js :
Utilice bootbox :

Si elige “Compatible con el viejo IE” “SÍ”, usted necesita poner “bootstrap.min.css” y “respond.min.js” en su servidor. Básicamente “respond.min.js” no funciona correctamente en CDN y los servidores de los demás.

< Scripts >
Puede descargar scripts que utiliza HTML. Usted puede poner en su servidor y vuelva a colocar sendas de scripts.
Bootstrap
jQuery
jQuery UI
backbone.js
underscore.js
bootbox
html5shiv
Respond.js
( Bootstrap y Respond.js son necesarios para descargar de forma antigua de IE. Por favor, tenga cuidado. )

Hacer STINGER 3 (el tema de WordPress) compatible con WPML (plug-in multilingüe)

< ¿Cuál es WPML? >
Es un plugin para WordPress multilingüe. Utilizo WPML en este blog mecrazy.
Sitio oficial de WPML

< ¿Cuál es STINGER3? >
Este es un tema para WordPress. Tiene muchas funciones interesantes y sin plugin. Por ejemplo, snippet de inserción de anuncios (como Google Adsense) y los botones sociales de diseño fresco. Tengo muchas ganas de tratar de utilizar este tema.
Sitio oficial de STINGER3 (página Japonesa)

< Esperanza actividad suave >
El desarrollador de STINGER3 está demasiado ocupado para responder en Twitter, y no estoy seguro de que puede leer otros idiomas aparte del japonés. Si usted tiene alguna pregunta acerca de STINGER3, espero que encuentres la respuesta en Google o resolver los problemas por sí mismo.

< Para las personas que no saben leer japonés >
Sitio web oficial del STINGER3 está en japonés. Creo que es difícil encontrar un enlace de descarga del archivo zip tema. Usted debe encontrar la palabra japonesa “ダウンロード“. Significa descarga en español. Utilice CTRL + F encontrar esta palabra. Por favor, encontrar el nombre del archivo actual versión “stinger3ver20140327.zip”.

< Código para la compatibilidad >
El código de abajo dan compatibilidad 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>

< Cómo insertar este código? >
Hay 3 ejemplos de formas de insertar el código. Por favor, elija una de ellas. O si usted sabe cómo personalizar WordPress, puede insertar manualmente en su código PHP.

< Método – 1 >
Ir a [ Apariencia – Widgets ] de menú del administrador. Por favor, añada “Texto” a un área válida. Por favor, no ingresar el título, puesto que el guión sólo en forma detallada.

< Método – 2 >
Desarrollé un STINGER3 loves WPML plugin. Este plugin hace lo mismo que el “Método – 1”. Si usted encuentra errores, por favor informar o decirme sobre Github, Twitter o Google+.

< Método – 3 >
Usando WordPress Plugin “Wp Insert“. Se puede insertar código HTML en cualquier lugar de tu blog.

< después >
Creo que cada uno de los métodos no son tan difíciles. Pero la versión actual de STINGER3 no es compatible con los archivos de mo idioma. Sólo podemos traducir con Traducción de cadenas de WPML. Si tengo tiempo libre, me quieren desarrollar parche para STINGER3 compatible con archivos mo.

< Actualizado el 11 de junio 2014 >
Fijo – No puede manejar primer evento del grifo de Android o iOS navegadores. El código fuente de esta página y el plugin de WordPress en Github se actualizan.

La generación de páginas web dinámicas sólo con Google Drive

< Advertencia >
Te recomiendo que para obtener la cuenta adicional Google sólo para público. Porque si sigues mi procedimiento, su dirección de Gmail será el archivo XML público.

< Nueva solución en 08/07/2014 >
Escribí el mensaje Obtenga nueva versión de Google Spreadsheets como JSONP. Si desea utilizar la nueva versión de Google Spreadsheets para generar páginas web dinámicas en lugar de la versión anterior, por favor, lea ese puesto.

< Actualizado el 26/04/2014 >
Utilice Anyfile Notepad o cualquier otra aplicación de edición de texto para Google Drive en Google tienda Web en lugar de Drive Notepad. Debido Drive Notepad fue retirado de la tienda.

< Actualizado el 12/05/2014 >
Hey! Drive Notepad ha vuelto a Google Web Store!

< Recomendación >
Te recomiendo que para instalar “Drive Notepad”. Es una extensión para Google Drive. Al instalar Drive Notepad, necesita Chrome. Pero después de conectar Drive Notepad a Google Drive, Chrome no es necesario. Usted puede utilizar Drive Notepad en cualquier navegador.
https://chrome.google.com/webstore/detail/drive-notepad/gpgjomejfimnbmobcocilppikhncegaj?hl=en-GB
drive_notepad_en_us

< Para actualizar el contenido de la Hoja de cálculo >
Usted necesidad de utilizar “Google Hoja de cálculo versión 1”. Porque “versión 2” no soporta CSV y XML para compartir todavía. (Escribí este post en el 19 abril de 2014.) Si normalmente genera nueva Hoja de cálculo actual, es ser automáticamente la versión 2.

Google explicó nueva Hoja de cálculo en “Probar la nueva versión de Hojas de cálculo de Google“.

Me preocupaba CSV y XML para compartir no voy a apoyar en la versión 2. Así que comprobé también “Funciones no compatibles con la nueva versión de Hojas de cálculo de Google“. Pero esta función no aparece en esa página. Sí … no aparece … pero nadie está seguro de que cuando Google cambia su mente ….
¿Se puede estar de acuerdo a esta situación? LOL

Vamos a acceder https://g.co/oldsheets para generar una Hoja de cálculo en la versión 1.

Es mi muestra.

No es más que una hoja. Ha encabezado, 3 cols y 2 filas.
( Voy a generar imgur sitio web de imágenes. )

< Vamos a hacerlo público >
Siga la foto de abajo.
publish_to_the_web_es

Seleccione “Publicar en la web” y presionar “Iniciar la publicación”.
Vea la sección “Obtener un enlace a los datos publicados”.
publish_to_the_web_2_es
Usted puede conseguir su hoja de cálculo como página Web, HTML, CSV, TXT, PDF, ATOM, RSS, XLS y ODS. Si desea sincronizar hoja de cálculo para su sitio web, usted debe elegir CSV, ATOM o RSS. Estos son formato fácil para la sincronización. Al elegir uno de ellos, puede encontrar la función para seleccionar la columna y la fila. Esta función puede hacer que el tamaño de archivo más pequeño por solicitud.

Si decide CSV, antes de seleccionar rango, por favor seleccione una hoja de destino. La muestra es como la imagen de abajo.
select_sheet_es
En mi muestra, “A1” es la cabecera. Quiero conseguir 5 filas máximo. Así que me puse el rango “A2: A6”.
select_cell_es
Puedes encontrar “range=A2%3AA6” en la url. Si desea agregar la función de búsqueda a su sitio web, usted debe cambiar de forma dinámica el parámetro de “range” de Javascript.

< ¿Es difícil? >
No se preocupe. Escribí el código Javascript aquí.
https://github.com/mecrazy/generateGoogleDriveUri
Este script es compatible con los formatos CSV, ATOM y RSS. Es sólo generador de URI. No tiene por parser. Si decide ATOM o RSS, puede usar jQuery como un analizador.

Utilice “generateGoogleDriveUri.min.js” como a continuación.

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

//Objeto de reparto
var gduObj = new genGDU('Put a link to the published data here');

//Generar URI
var atomUri = gduObj.genUri(
  'atom', // Elijo formato ATOM.
  {
    startRow:2, //Empezar desde la fila 2
    startCol:1, //Empezar desde col 1
    cols:1, //Cortar 1 columnas
    rows:5, //Cortar 5 Filas por página
    page:1 //Consigue página 1
  }
);

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

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

< Añadir index.html y el establecimiento de Drive Notepad >
Después de agregar Drive Notepad en Chrome, usted puede encontrar “Text Document” en el menú de Google Drive crear.
add_index_es
Si es la primera vez que utiliza Drive Notepad, se le pedirá como a continuación.
permission_01_en_us
Empuje “Login and/or grant app permissions…” y aceptar la siguiente pregunta.
permission_02_es

Por favor, cambie el nombre del archivo a “index.html”. Después de guardar el archivo, cierre la pestaña.
change_file_name_en_us

Por favor cambia la configuración de “Administrar aplicaciones”.
manage_apps_es
Por favor, consulte “Usar como opción predeterminada” de la fila Drive Notepad.
use_by_default_es
Después de eso, puede utilizar Drive Notepad como las otras aplicaciones en Google Drive.

< Cambiar configuración de uso compartido >
Seleccione la carpeta para establecer público.
Después de eso, seguir la foto de abajo.
set_sharing_enabled_01_es
Establecer “Público en la Web” marcada.
set_sharing_enabled_02_es

< Preparación HTML, CSS, Javascript >
Utilice Drive Notepad para prepararlos.
O editar con su propio editor de texto y subirlos.
Mi posición relativa es como a continuación.
my_public_tree_es

El siguiente enlace es mi página web creada con Google Hoja de cálculo.
https://googledrive.com/host/0B2hsIY7iHEnLS290OHlmRkFmbU0/
Si lo desea, por favor, utilice fuentes como muestra.

< Escritura supletoria >
Desarrollé imgur convertidor URL de mi página web. Si lo desea, por favor, utilice esto.
https://github.com/mecrazy/imgurUrlConverter