Archiv der Kategorie: HTML

HTML

Ich baute PhantomJS 2.1.1 für Raspberry Pi

Ich baute PhantomJS 2.1.1 für Raspberry Pi. Es kann auch auf jeder armhf Architektur Maschinen laufen.

Ich verwendete Debian auf ARM VPS auf https://www.scaleway.com/ und folgen Sie dieser Seite, es zu bauen.

Bitte laden Sie von https://github.com/mecrazy/phantomjs-binaries.
( Nach meiner Pull-Anforderung erlaubt, werde ich den Link in diesem Blog “https://github.com/avaynshtok/phantomjs-binaries” bearbeiten. )

Ich benutze Raspberry Pi als Testmaschine für alle Server-Anwendungen wie Web-Scraping. Aber es gab keine PhantomJS Binärdateien für armhf Architektur auf dem Netz. Also baute ich es. Bitte verwenden Sie diesen binären, wenn Sie möchten. Aber ich kann keine Probleme und Bugs nicht kümmern, wenn Sie es verwenden.

< Was ist "PhantomJS"? >
PhantomJS ist ein Web-Tool Schaben mit JavaScript-API. Es kann Web-Seiten als PDF, PNG oder irgendeine Art von Bild-Datei zu erfassen. Wenn Sie mehr über PhantomJS wissen wollen, klicken Sie bitte auf http://phantomjs.org/.

Neue Version von Google Spreadsheets als JSONP

< Warnung >
Ich empfehle Ihnen, zusätzliche Google-Konto nur für die Öffentlichkeit. Denn wenn Sie mein Verfahren zu folgen, wird Ihr Google Mail-Adresse auf öffentlichen JSONP Datei sein.

< Google Spreadsheets >
Alte Version von Google Spreadsheets können Tabellen als XML, JSON und eine Art von Format zu teilen. Ich dachte, neue Version nicht über eine solche Sharing-Funktionen. Aber ich fand das gute Lösung für die neue Version von Google Spreadsheets auf der Antwort auf die Frage auf Stackoverflow.
Unable to publish specific cells in new Google Spreadsheets – StackOverflow ( Englisch )
Laut der Seite oben, ist dies eine Art von API alte API. Niemand ist sicher, wenn es nicht mehr. Ist mir egal, diese Situation. Aber wenn man nicht, wie die Situation nicht, weiß ich nicht empfehlen Ihnen, dieses API verwenden.

< URL-Format >

https://spreadsheets.google.com/feeds/cells/[ Ihr Tabellenkalkulationsschlüssel ]/od6/public/values?min-row=[ starten Zeilennummer ]&max-row=[ Ende Zeilennummer ]&min-col=[ starten Spaltennummer ]&max-col=[ Ende Spaltennummer ]&alt=json-in-script&callback=[ Callback-Funktion Namen ]

< Wie benutzt man es? >
JSONP Format ist einfach, in JavaScript zu verwenden. Niemand braucht Parser. Aber ich möchte URL-Generator verwenden die API noch nützlicher zu machen. Also entwickelte ich ein Skript, das von Paging-Parameter, um URL-Parameter wandelt folgenden Google-Syntax.

< jQuery-Plugin >
Ich entwickelte dieses jQuery-Plugin namens “generateGoogleJsonpUri”.
generateGoogleJsonpUri – github
Ich habe Beispielseite wie ein Blog Rahmen, um mein Plugin zu testen.
https://mecrazy.net/sample/generateGoogleJsonpUri/
Wenn Sie möchten, kopieren Sie bitte die Quelle als Beispiel.

< Verwendung – Gießerei >
Casting Syntax ist

var test = $.genJsonpGDU("<Your-Tabellenkalkulation-key-hier>");

oder

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

.

Sie können einen Schlüssel in der URL Ihrer Tabelle zu finden. Es ist meine Probe unten.
spreadsheet_sample_001
Auf diesem Bild ist URL “https://docs.google.com/spreadsheets/d/1IG2QEOXehU01b6DoMQi19CvFpm2EZJOUM2y4lqXKduw/edit#gid=0”. Der Schlüssel für meine Tabelle ist “1IG2QEOXehU01b6DoMQi19CvFpm2EZJOUM2y4lqXKduw”. Bitte überprüfen Sie die URL Ihrer Tabelle, um Ihre Schlüssel zu erhalten.

< Verwendung – Pager konfigurieren >

test.pager({
  startRow:2,//Zeilennummer, anfangen (erforderlich)
  minCol:2,//Spaltennummer, anfangen (erforderlich)
  maxCol:7,//Spaltennummer, um am Ende immer (erforderlich)
  recsPerPage:5//Datensätze in einer Seite (fakultativ)
});

Bitte vergleichen Sie die Syntax oben und unten stehende Tabelle. Wenn Sie die Tabelle unten sehen, bitte vorstellen, Excel oder jede Art von Tabellenkalkulation. Syntax oben bedeutet, dass der Bereich der ersten Seite ist rosa-Bereich, 2. Seite ist grünen Bereich. “B2:G2” ist ein erster Rekord. “B6:G6” ist eine fünfte Rekord.

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

< Verwendung – bekommen URL der Seite >
Es ist ein Beispiel zur ersten Seite URL zu bekommen.

var pageUrl = test.page(1);

( “test.pager(Objekt)” wird vor der Ausführung dieser Funktion erforderlich. )

< Verwendung – Ajax ausführen >
Argumente für “test.ajax” sind dieselben wie “http://api.jquery.com/jQuery.ajax/“.

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

Wenn Sie wissen möchten aktuelle Seite vorherige Seite oder nächste Seite möchten, nutzen Sie bitte “test.get()” in der Funktion success und Kontrollparameter .

test.ajax({
  url:test.page(1),
  success:function(json){
    console.log(json);
    var param = test.get();
    if(param.pager.prev){
      console.log('Diese Seite hat vorigen Seite.');
    }else{
      console.log('Diese Seite hat keine vorherige Seite.');
    }
    if(param.pager.next){
      console.log('Diese Seite hat nächsten Seite.');
    }else{
      console.log('Diese Seite hat keine nächsten Seite.');
    }
  }
});

< Verwendung – JSON konvertiert, um 2D-Array >
“test.jsonToArr” wandelt von JSON-Format von Google, um 2D-Array.

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

< Verwendung – Variable Cache >
Wenn Sie das Paging-Cache ermöglichen mit Hilfe von JavaScript-Variablen, folgen Sie bitte der nachfolgenden Syntax.

test.set({cache:true});

Dieses Argument schaltet auf Cache für Paging verwenden. Es prüft Update Zeitpunkt JSONP alle 20 Minuten standardmäßig. Wenn das Datum geändert, wird es automatisch klar Cache. Wenn Sie das Intervall, um das Datum zu überprüfen ändern möchten. Sie können die Syntax wie unten statt der oben genannten Syntax verwenden.

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

< Nachwort >
Es gibt grundlegende Unterschiede zwischen neuen und alten Google Spreadsheets.

  neu alt
Maximale Zellen 2 Millionen Zellen 400,000 Zellen
Maximale Spalten unbegrenzt 256 Spalten pro Blatt

Ich denke, die neue Version ist unglaublich groß und kostenlose Datenbank. Ich möchte interessante Verwendungen der neuen Google Spreadsheets finden.

Basic HTML-Generator für Bootstrap 3

< Was ist das? >
Es erzeugt grundlegende HTML-Quelle für Bootstrap-3. Können Sie Optionen wählen, wenn Sie es zu erzeugen. Ich häufig hier für mich. Wenn Sie möchten, besuchen Sie die Seite.


< Generator >
Page Titel :
Sprachcode :
Bootstrap-Version :
Kompatibel mit alten IE :
Verwenden Sie feste navbar :
Verwenden klebrig Fußzeile :
Verwenden Sie jQuery Failover :
Verwenden Sie jQuery-UI Failover :
Verwenden backbone.js :
Verwenden underscore.js :
Verwenden bootbox :

Wenn Sie “Kompatibel mit alten IE” “JA” wählen, müssen Sie setzen “bootstrap.min.css” und “respond.min.js” auf Ihrem Server. Grundsätzlich “respond.min.js” nicht korrekt auf CDN und Servern anderer zu arbeiten.

< Skripte >
Sie können Skripts, die HTML verwendet herunterladen. Sie können auf Ihrem Server abgelegt und ersetzen Wege von Skripten.
Bootstrap
jQuery
jQuery UI
backbone.js
underscore.js
bootbox
html5shiv
Respond.js
( Bootstrap und Respond.js notwendig, um für alte IE downloaden sind. Bitte seien Sie vorsichtig. )

Machen STINGER3 (WordPress-Theme) kompatibel mit WPML (Multilanguage-Plugin)

< Was ist WPML? >
Es ist eine mehrsprachige Plugin für WordPress. Ich benutze WPML auf dieser mecrazy Blog.
Offizielle Website von WPML

< Was ist STINGER3? >
Dies ist ein Thema für WordPress. Es hat viele nette Funktionen, ohne Plugin. Zum Beispiel Code Inserter für Anzeigen (wie Google Adsense) und cooles Design sozialen Tasten. Ich wollte versuchen, dieses Thema zu verwenden.
Offizielle Website von STINGER3 (Japanische Seite)

< Hoffe, sanfte Aktivität >
Der Entwickler STINGER3 ist zu beschäftigt, um auf Twitter zu beantworten, und ich bin nicht sicher, dass er andere als japanischer Sprache zu lesen. Wenn Sie Fragen zu STINGER3 haben, ich hoffe, dass Sie die Antwort auf Google zu finden oder die Probleme zu lösen, indem Sie sich.

< Für Menschen, die kein Japanisch lesen kann >
Offizielle Website des STINGER3 ist in Japanisch. Ich denke, es ist schwierig, Download-Link von Themen zip-Datei zu finden. Sie sollten feststellen, das japanische Wort “ダウンロード“. Es bedeutet “Download” auf Deutsch. Bitte benutzen Sie CTRL + F, um dieses Wort zu finden. Hier finden Sie die aktuelle Version Dateiname “stinger3ver20140327.zip”.

< Code für Kompatibilität >
Der Code unten geben WPML Kompatibilität zu 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>

< Wie man diesen Code einfügen? >
Es gibt 3 Möglichkeiten, um beispielsweise den Code einfügen. Bitte wählen Sie eine von ihnen. Oder wenn Sie wissen, wie man WordPress anpassen, die Sie manuell auf Ihre PHP-Skripte einfügen.

< Methode – 1 >
Zum [ Design – Widgets ] von Administrator-Menü. Bitte fügen Sie eine gültige “Text” Bereich. Bitte geben Sie nicht den Titel, legte das Skript nur in der Detail-Formular.

< Methode – 2 >
Ich entwickelte ein Plugin STINGER3 loves WPML. Dieses Plugin das gleiche tun wie “Methode – 1”. Wenn Sie Fehler finden, bitte melden oder mir sagen, auf Github, Twitter Google+ oder.

< Methode – 3 >
Mit WordPress Plugin “Wp Insert“. Es kann HTML-Code, um überall auf Ihrem Blog einfügen.

< Nachher>
Ich denke, jeder Methoden sind nicht so schwierig. Aber aktuelle Version des STINGER3 ist nicht mit der Sprache mo-Dateien kompatibel. Wir können nur mit String zu übersetzen Übersetzung von WPML. Wenn ich freie Zeit, ich will Patch für STINGER3 kompatibel mit mo-Dateien zu entwickeln.

< Aktualisiert am 11. Juni 2014 >
Fest – Es kann nicht damit umgehen ersten Abgriff Falle von Android oder iOS-Browsern. Source-Code auf dieser Seite und die WordPress-Plugin auf Github aktualisiert.

Erzeugung dynamischer Web-Seiten nur mit Google Drive

< Warnung >
Ich empfehle Ihnen, zusätzliche Google-Konto nur für die Öffentlichkeit.
Denn wenn Sie mein Verfahren zu folgen, wird Ihr Google Mail-Adresse auf öffentlichen XML-Datei sein.

< Neue Lösung auf 2014.07.08 >
Ich schrieb den Beitrag Neue Version von Google Spreadsheets als JSONP. Wenn Sie eine neue Version von Google Spreadsheets verwenden, um dynamische Web-Seiten statt der alten Version erstellen möchten, lesen Sie bitte diesen Beitrag.

< Aktualisiert am 2014.04.26 >
Bitte verwenden Anyfile Notepad oder einem anderen Texteditor Apps für Google Drive Google Web Store statt Drive Notepad. Da Drive Notepad wurde ausgelagert.

< Aktualisiert am 2014.05.12 >
Hey! Drive Notepad ist zurück, um Google Web Store!

< Empfehlung >
Ich empfehle Ihnen, “Drive Notepad” installieren. Es ist eine Erweiterung für Google Drive. Wenn Sie Notepad Laufwerk installieren, müssen Sie Chrome. Aber nach dem Anschluss Drive Notepad zu Google Drive, wird Chrome nicht erforderlich. Sie können Drive Notepad auf allen Browsern.
https://chrome.google.com/webstore/detail/drive-notepad/gpgjomejfimnbmobcocilppikhncegaj?hl=en-GB
drive_notepad_en_us

< Zum Aktualisieren Inhalte aus Tabelle >
Sie müssen “Google Tabelle Version 1” zu bedienen. Denn “Version 2” nicht CSV-und XML-Sharing unterstützen noch. (Ich schrieb diesen Beitrag in 19. April 2014.) Wenn man heute in der Regel neue Tabelle erzeugen, wird es automatisch Version 2 sein.

Google erklärt neue Tabelle auf “Jetzt das neue Google Tabellen ausprobieren“.

Ich machte mir Sorgen über CSV-und XML-Sharing wird nicht in der Version 2 unterstützt. So überprüfte ich auch “Nicht unterstützte Funktionen im neuen Google Tabellen“. Aber diese Funktion wird nicht auf dieser Seite aufgeführt. Yep … nicht aufgeführt … aber niemand ist sich sicher, wenn Google ihre Meinung ändern ….
Können Sie diese Situation zu? LOL

Lassen Zugang https://g.co/oldsheets eine Tabelle in der Version 1 zu erzeugen.

Es ist meine Probe.

Es ist nur ein Blatt. Es hat header, 3 Pässe und 2 Zeilen.
(Ich werde imgur Bild Website zu generieren.)

< Machen wir es der Öffentlichkeit >
Folgen Sie dem Bild unten.
publish_to_the_web_de

Wählen Sie “Im Web veröffentlichen” und drücken Sie “Veröffentlichen beenden”.
Siehe Abschnitt “Link zu den veröffentlichten Daten anfordern”.
publish_to_the_web_2_de
Sie können Ihre Tabellenkalkulation als Web-Seite, HTML, CSV, TXT, PDF, ATOM, RSS, XLS und ODS zu bekommen. Wenn Sie Tabellenkalkulation auf Ihre Website synchronisieren möchten, sollten Sie CSV, ATOM oder RSS zu wählen. Diese sind leicht Format für die Synchronisierung. Wenn Sie einen von ihnen wählen, können Sie die Funktion zu finden, um Spalte und Zeile auswählen. Diese Funktion kann die Dateigröße pro Anforderung kleiner zu machen.

Wenn Sie CSV zu wählen, bevor Sie Bereich Bitte wählen Sie eine Zielblatt. Probe ist, wie im folgenden Bild.
select_sheet_de
In meinem Beispiel, “A1” ist Header. Ich möchte maximal 5 Reihen zu bekommen. Also ich den Bereich “A2: A6”.
select_cell_de
Sie können “range=A2%3AA6” in der URL zu finden. Wenn Sie das Paging-Funktion, um Ihre Web-Site hinzufügen möchten, sollten Sie den Parameter für “Reichweite” von Javascript dynamisch ändern.

< Ist es schwierig? >
Mach dir keine Sorgen. Ich schrieb den Javascript-Code hier.
https://github.com/mecrazy/generateGoogleDriveUri
Dieses Skript ist mit CSV, ATOM und RSS-Formaten kompatibel. Es ist nur URI-Generator. Es muss nicht Parser. Wenn Sie oder ATOM RSS wählen, können Sie als jQuery-Parser verwenden.

Bitte verwenden “generateGoogleDriveUri.min.js” wie unten.

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

//Casting-Objekt
var gduObj = new genGDU('Setzen Sie einen Link zu den veröffentlichten Daten hier');

//Generieren URI
var atomUri = gduObj.genUri(
  'atom', // Ich wählen ATOM-Format.
  {
    startRow:2, //Start aus Reihe 2
    startCol:1, //Starten Sie von col 1
    cols:1, //Cut 1 Spalten
    rows:5, //Cut 5 Zeilen pro Seite
    page:1 //Holen Seite 1
  }
);

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

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

< In index.html und Drive Notepad Einstellung >
Nachdem Sie auf Laufwerk Notepad Chrome hinzufügen, können Sie “Text Document” auf erstellen Menü Ihres Google Drive finden.
add_index_de
Wenn es das erste Mal auf Drive Notepad verwenden, werden Sie wie unten gefragt.
permission_01_en_us
Drücken Sie “Login and/or grant app permissions…” und akzeptieren Sie die Frage unten.
permission_02_de

Bitte ändern Sie den Dateinamen “index.html”. Nach dem Speichern der Datei, schließen Sie die Registerkarte.
change_file_name_en_us

Bitte ändern Sie die Einstellung über “Apps verwalten”.
manage_apps_de
Bitte überprüfen Sie “Standardmäßig verwenden” Drive Notepad Reihe.
use_by_default_de
Danach können Sie Drive Notepad wie die anderen Apps auf Google Drive verwenden.

< Ändern Sie Freigabeeinstellungen >
Wählen Sie Ihre Ordner der Öffentlichkeit zu setzen.
Danach folgen Sie dem Bild unten.
set_sharing_enabled_01_de
Stellen Sie “Öffentlich im web” überprüft.
set_sharing_enabled_02_de

< Vorbereiten HTML, CSS, Javascript >
Verwenden Drive Notepad, um sie vorzubereiten.
Oder bearbeiten Sie mit Ihrem eigenen Text-Editor und laden Sie sie.
Meine relative Position ist wie unten.
my_public_tree_de

Der Link unten ist meine Web-Seite mit Google Tabelle erstellt.
https://googledrive.com/host/0B2hsIY7iHEnLS290OHlmRkFmbU0/
Wenn Sie möchten, nutzen Sie bitte Quellen als Probe.

< Extra-Skript >
Ich entwickelte imgur URL-Konverter für meine Web-Seite. Wenn Sie möchten, nutzen Sie bitte dieses.
https://github.com/mecrazy/imgurUrlConverter